函数add()与select,但我不能选择相同的数字两次

时间:2018-04-22 11:26:31

标签: javascript

我无法选择相同的数字两次,我正在尝试使用select输入数字并使用该功能将它们添加到一起。



<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > </script>

<script>
  const firstFunct = (() => {
    let counter = 0;
    return () => {
      counter += +document.getElementById("mySelect").value;
      document.getElementById("Group 1 score").innerHTML = counter;
      if ((counter) >= 54) {
        document.body.innerHTML = "<p class='Group'>Group 1 Win</p><p onClick='location.reload()'                 class='Again'>Again</p>";
      }
    };
  })(); 
</script>
&#13;
<form>
  <select id="mySelect" onchange="firstFunct()">
    <option value="" disabled selected style="display:none;">+</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>12</option>
    <option>14</option>
    <option>16</option>
    <option value="1">1</option>
    <option value="54">win</option>
  </select>
</form>
<p id="Group 1 score" style="font-size: 75px;">0</p>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

firstFunct()函数仅在更改select元素时调用。根据{{​​1}}事件的this文档,仅在值更改时调用该事件。因此,如果您选择两次相同的值,则不会触发该事件。如果您希望每次都触发该功能,您可以考虑使用change事件。您可以找到此活动的文档here

答案 1 :(得分:0)

更改firstFunct,如下所示。添加的代码行在添加到计数器后清除最后选择的值。这允许您重复选择相同的值。

<script>
      const firstFunct = (() => {
        let counter = 0;
        return () => {
          counter += +document.getElementById("mySelect").value;
          document.getElementById("mySelect").value = null; //**this would clear the last selected value 
          document.getElementById("Group 1 score").innerHTML = counter;
          if ((counter) >= 54) {
            document.body.innerHTML = "<p class='Group'>Group 1 Win</p><p onClick='location.reload()'                 class='Again'>Again</p>";
          }
        };
      })(); 
    </script>