使用事件侦听器检测对按钮的单击，然后增加对 html 元素的计数

我的主要目标是添加这个二十一点游戏的功能，以使用事件侦听器在网页底部显示和增加游戏的数量。我只学习了几天JS，也许我选择了一个太困难的问题，但我非常接近解决方案。很确定我要么缺少一个所需的变量，要么不知道某个函数以使事情变得更容易。

我已经尝试使用点击功能，并且能够成功制作一个按钮，单击该按钮会增加按钮的数量。我还使按钮和标题具有相同的类名，并且能够成功单击按钮以增加数字。但我相信我缺少一些基本的东西来连接"debutton"类元素与<h4> 0 </h4>以增加其数量。

var button = document.getElementsByClassName("debutton")
var gamesplayed = document.getElementById("gamesplayed")
count = 0;
for (var i = 0 ; i < button.length; i++) {
  button[i].addEventListener('click' , displaygames , false); 
}
function displaygames() {
  console.log("The Button was clicked!");
  gamesplayed.count += 1;
  gamesplayed.innerHTML = "" + count;
};

<body>
  <h1><b><em>BlackJack</em></b></h1>
  <h2>Betting</h2>
  <div>
    <button class="debutton" id="debutton" onClick="deal(1)">Bet  $1</button>		
    <button class="debutton" id="debutton" onClick="deal(5)">Bet $5</button>		
    <button class="debutton" id="debutton" onClick="deal(10)">Bet $10</button>		
    <button class="debutton" id="debutton" onClick="deal(20)">Bet $20</button><br>	
    <h2>My Money</h2>	
    <div id="playermoney"><b>$100</b></div>
  </div>
  <h3><em>Games Played:</em></h3>
  <h4 class="gamesplayed" id="gamesplayed" type="number">0</h4>
</body>

控制台日志让我知道我已成功找到"取消按钮"元素。

玩游戏.count 直接访问不起作用以下代码可能会有所帮助

var count = parseInt(document.getElementById("gamesplayed").innerHTML)
count += 1;
gamesplayed.innerHTML = "" + count;

gamesplayed.count += 1; should be count += 1

顺便说一句，在我看来，如果您始终在debutton上调用deal((函数，则不需要侦听事件，然后您可以在那里增加计数变量。

在我进入解决方案之前的两个指针。为了帮助理解解决方案，我将其"简化"为最简单的形式。这是一个按钮，单击时会更新总计数器。第二个是我使用了jQuery，因为它是一个非常有用的工具，简化了需要完成的工作。

<button class="increase" value="10">Add</button>
<div class="total">$<span class="count">0</span></div>
<script>
    var counter = $('.total span.count');
    $(document).ready(function(){
        $(".increase").click(function(){
            currentValue = parseInt(counter.text())
            addValue = parseInt($(this).attr('value'));
            counter.text(currentValue + addValue);
        });
    });
</script>

上面我们有一个保存值的按钮，在本例中为"10"。然后，我们为单击按钮绑定一个侦听事件。单击按钮时，我们从 span.count 元素中提取 "value" 属性和按钮总值，并在更新文本之前将它们加在一起。

另请注意，我以这种方式构建了它，因此当前符号位于 span.count 元素之外，因此我们可以相信该值将始终是数字。

作为重要的说明。我们需要使用 parseInt() 将提取的值转换为整数。否则，它们将用作字符串，"10" + "10"将导致1010而不是20。

相关内容

最新更新

热门标签：