Question

我是JavaScript新手，我在这里学习了如何使用该语言。所以，在我的index.html中，我在这里有这个代码：

<div data-role="collapsible">
  <h3>Reset Score</h3>
  <button type="button" id="resetscore">Reset</button>
  <script type="text/javascript">
  function reset() {
    localStorage.setItem('total_win', 0);
    localStorage.setItem('total_lose', 0);
  }
  </script>
</div>

这是作为页脚：

`<div id="scores" class="ui-grid-b">
<div class="ui-block-a">Tries left:<span id="tries_left">4</span></div>
<div class="ui-block-b">Total win:<span id="total_win">0</span></div>
<div class="ui-block-c">Total lost:<span id="total_lose">0</span></div>
</div>`

我基本上要做的就是将分数重置为零。但它不起作用...... 我试着把一些alert（）放在reset（）函数中但是也没有用。

有人知道为什么会这样吗？谢谢你的帮助！

Answer 1

使用onclick属性：

<div data-role="collapsible">
      <h3>Reset Score</h3>
      <button type="button" id="resetscore" onclick="reset()">Reset</button>
      <script type="text/javascript">
      function reset() {
        localStorage.setItem('total_win', 0);
        localStorage.setItem('total_lose', 0);
      }
      </script>
    </div>

您正在声明该功能但未在任何地方调用它。因此，您需要在onclick按钮事件处调用该函数。

Answer 2

只需添加：

<button type="button" onclick="reset()" id="resetscore">

你需要知道你要使用哪一个函数，注意onclick，它就是这样，所以重置会在点击时执行

Answer 3

您的按钮需要调用重置

<button type="button" id="resetscore" onclick="reset()">Reset</button>

Answer 4

您应该为click事件添加一个事件侦听器。

由于您的评论，您可以通过更改内部HTML来更改DOM，请参阅下面的代码段和代码：

document.getElementById('resetscore').addEventListener('click',function() {
            //localStorage.setItem('total_win', 0);
            //localStorage.setItem('total_lose', 0);
            document.getElementById('total_win').innerHTML = 0;
            document.getElementById('total_lose').innerHTML = 0;
          });
     document.getElementById('win').addEventListener('click',function(){
            var a = parseFloat(document.getElementById('total_win').innerHTML);
            document.getElementById('total_win').innerHTML = (a+1).toFixed(0);
});
   document.getElementById('loss').addEventListener('click',function(){
           var b = parseFloat(document.getElementById('total_lose').innerHTML);
            document.getElementById('total_lose').innerHTML = (b+1).toFixed(0);       
});

<div data-role="collapsible">
      <h3>Reset Score</h3>
      <button type="button" id="resetscore">Reset</button>
      <button type="button" id="win">+1 Win</button>
      <button type="button" id="loss">+1 Loss</button>
    </div>
    <div id="scores" class="ui-grid-b">
    <div class="ui-block-a">Tries left:<span id="tries_left">4</span></div>
    <div class="ui-block-b">Total win:<span id="total_win">0</span></div>
    <div class="ui-block-c">Total lost:<span id="total_lose">0</span></div>
    </div>

你的脚本标签不能在div内。您需要将所有的javascript移动到正文的末尾，就在它的结束标记之前，在所有html之后

试图在JavaScript中创建一个按钮，但它不起作用

4 个答案: