Question

我正在学习HTML编程，我想创建一个＆＃34;网站＆＃34; （只是为了尝试我的知识）。这很简单。有两个按钮。如果你按下win，添加1个分数来赢得变量，如果按下输入，则添加1个分数以输掉变量。它会在按钮下面写下分数。但我无法做到。

 </head>

 <body>

   <button id="win">Win!</button><button id="lose">Lose</button>

   </br>

   <script>
     var win = 0;
     var lose = 0;


     function win(){
       win = win + 1;
    };

    function lose (){
      lose = lose + 1
    };
  </script> 
 </body>
</html>

Answer 1

在按钮上添加onclick事件：

<button id="win" onclick="return win();">Win!</button>
<button id="lose" onclick="return lose();">Lose</button>

您需要在每个按钮（div或span）下使用ID，以便在更新数字时更改innerHTML。改变你的功能以更新相应的元素。

您可能还想将按钮和元素包装在表格中。

Answer 2

像这样 -

<html>
    <table>
        <tr>
        <td><button id="win" onclick="win()">Win!</button></td>
        <td><button id="lose" onclick="lose()">Lose!</button></td>
        </tr>
        <tr>
         <td id="wins"></td>
         <td id="losses"></td>
        </tr>
    </table>

<script>
    var wins= 0;
    var losses = 0;

    function win() {
        wins= wins+1;
        document.getElementById('wins').innerHTML= wins;
    };

    function lose() {
        losses= losses+1;
        document.getElementById('losses').innerHTML= losses;
    };
</script>

</html>

按钮为变量提供分数

2 个答案: