Basic Javascript onclick

本文关键字：onclick Javascript Basic 更新时间：2023-09-26

这是我的代码，这是一个全新的代码，如果在框"winner"中键入"Ben"，则尝试获取框"points"以返回pointSum的总和。只是试着在这个项目上做一些基础工作。试图制作一个括号类型的

<HTLML>
<head>
    <script>
        var pointSum = 0;
        var firstRound = 20;
        var secondRound = 50;
        var thirdRound = 100;
        var fourthRound = 150;
        var fifthRound = 250;
        var finalRound = 300;
        var winnerOne = false;
        var winnerTwo = false;
        var winnerThree = false;
        var winnerFour = false;
        var winnerFive = false;
        var winnerSix = false;
        if (winnerOne = true){
            pointSum+=firstRound
        } else if (winnerTwo = true){
            pointSum+=secondRound
        } else if (winnerThree = true){
            pointSum+=thirdRound        
        } else if (winnerFour = true){
            pointSum+=fourthRound
        } else if (winnerFive = true){
            pointSum+=fifthRound
        } else if (winnerSix = true){
            pointSum+=finalRound
        else 
        function tally() {if document.getElementById('winner') == "Ben" { winnerOne = true;
            }
                    pointSum=document.getElementById("points").value;
        }
    </script>
</head>
<body>
    <form>
        Winner: 
        <input type="text" name="winner" id="winner" size="20">
        Points:
        <input type="text" name="points" id="points" size="20">
        Submit 
        <button type= "button" onclick="tally()">Tally points</button>
    </form>
</body>
</html>

更新*****新代码，变得更好，没有返回控制台错误，但在点击计数时仍然没有在"积分"框中得到任何东西

<HTLML>
<head>
    <script>
        var pointSum = 0;
        var firstRound = 20;
        var secondRound = 50;
        var thirdRound = 100;
        var fourthRound = 150;
        var fifthRound = 250;
        var finalRound = 300;
        var winnerOne = false;
        var winnerTwo = false;
        var winnerThree = false;
        var winnerFour = false;
        var winnerFive = false;
        var winnerSix = false;
        function tally() {
            var winner = document.getElementById("winner").value; 
            var firstWinner = "Ben";
            if (winner == firstWinner){ 
                winnerOne == true;
            }
                pointSum = document.getElementById("points").value;     
        }           
        if (winnerOne == true){
            pointSum+=firstRound;
        } else if (winnerTwo){
            pointSum+=secondRound;
        } else if (winnerThree){
            pointSum+=thirdRound;
        } else if (winnerFour){
            pointSum+=fourthRound;
        } else if (winnerFive){
            pointSum+=fifthRound;
        } else if (winnerSix){ 
            pointSum+=finalRound;
        }
    </script>
</head>
<body>
    <form>
        Winner: 
        <input type="text" name="winner" id="winner" size="20">
        Points:
        <input type="text" name="points" id="points" size="20">
        Submit 
        <button type= "button" onclick="tally()">Tally points</button>
    </form>
    <div class="updatePoints">
    </div>
</body>
</html>

您的代码有一些错误，让我们稍微更改一下！

首先，您需要访问if语句中winner元素的"value"atribute，并将所有语句括在括号中

function tally() {
    if (document.getElementById('winner').value == "Ben"){
        winnerOne = true;
    }
    pointSum = document.getElementById("points").value;
}

第二，你使用"=="进行比较，你使用的是"="，这意味着你为变量赋值为true，而你忘记了放"；"行的末尾！更改此部分：

if (winnerOne == true){
     pointSum+=firstRound;
}

把你所有的if/else都像上面的例子一样！

提示：当你使用if语句时，你可以这样使用：

if (winnerOne){ //you can omit == true, because if winnerOne is true, it will enter ind the if statement
     //will enter here if winnerOne is true
}
if (!winnerOne){ //you can omit == false, because if winnerOne is not true, it will enter ind the if statement
     //will enter here if winnerOne is false
}

您在if检查结束时还有一个剩余的else，它是无效的。您需要用};结束最后一个else if语句。

你是想把文本放在什么地方吗？我没有看到任何代码处理这个问题——你可能想添加一些HTML，更新如下：

<div class="updatePoints">
  // leave empty 
</div>

然后，在您的JavaScript中，您可以随时添加一些代码来更新.updatePoints

var points = document.getElementByClass('updatePoints');
points.innerHTML = pointSum.value;

在代码中添加一些行，并用一些注释对其进行修改。可以尝试https://jsfiddle.net/8fhwg6ou/.希望能有所帮助。

<HTLML>
<head>
    <script>
        var pointSum = 0;
        var firstRound = 20;
        var secondRound = 50;
        var thirdRound = 100;
        var fourthRound = 150;
        var fifthRound = 250;
        var finalRound = 300;
        var winnerOne = false;
        var winnerTwo = false;
        var winnerThree = false;
        var winnerFour = false;
        var winnerFive = false;
        var winnerSix = false;
        function tally() {
            var winner = document.getElementById("winner").value; 
            var firstWinner = "Ben";
            if (winner == firstWinner){ 
                winnerOne = true; // Use only one = symbol to assign value, not ==
                pointSum = Number(document.getElementById("points").value); // moved from outside and convert to number
                // This code will update point in Points box
                document.getElementById("points").value = tally_pointsum(pointSum);
                // The codes below will add the text in div, just remove the + sign if you don't like
                document.getElementById("updatePoints").innerHTML += (tally_pointsum(pointSum) - pointSum) + " points added<br />";
            }
        }
        // Wrap codes below become a function, lets call it tally_pointsum:
        function tally_pointsum(pointSum) {
            if (winnerOne == true){
                pointSum+=firstRound;
            } else if (winnerTwo){
                pointSum+=secondRound;
            } else if (winnerThree){
                pointSum+=thirdRound;
            } else if (winnerFour){
                pointSum+=fourthRound;
            } else if (winnerFive){
                pointSum+=fifthRound;
            } else if (winnerSix){ 
                pointSum+=finalRound;
            }
            return pointSum; //return the sum to caller
        }
    </script>
</head>
<body>
<form>
    Winner: 
    <input type="text" name="winner" id="winner" size="20">
    Points:
    <input type="text" name="points" id="points" size="20">
    Submit 
    <button type= "button" onclick="tally()">Tally points</button>
</form>
<!-- change class="updatePoints" to id="updatePoints" for document.getElementById("updatePoints") -->
<div id="updatePoints">
</div>

快乐的编码。