通过按下按钮计算点击次数

Question

我是编码和使用 Lab.JS 项目的新手。我有一个按钮，当按下它时，它会计算点击次数，然后将其记录在控制台中。重要的是，当按下按钮时，点击次数不会显示在屏幕上，并且远离按下按钮的人。我只想计算点击次数，但我不确定如何修复代码。我将不胜感激。

var clicks = 0;
trigger = function() {
clicks += 1;
document.getElementById("trigger").innerHTML = clicks;
}
console.log(clicks)

<button class="trigger" id="trigger" onclick="trigger()">SUBMIT</button>

Answer 1

请尝试此代码。

  <body>
    <button onclick="trigger()">Click Me</button>
    <script>
      // Initiate a global variable a
      var a = 0;
      function trigger() {
        a++;
        console.log(a);
      }
    </script>
  </body>

只要你把你的变量设为全局变量。它的值将只保存在该页面，直到用户关闭该页面或选项卡。

Answer 2

您可以添加一个新的 div 并使用计数更新它，而不是更新按钮的 HTML：

var clicks = 0;
trigger = function() {
  clicks += 1;
  document.getElementById("display").innerHTML = clicks;
}

#display {
  padding: 20px;
  margin: 10px;
  font-size: 2rem;
}

<div id="display">0</div>
<button class="trigger" id="trigger" onclick="trigger()">SUBMIT</button>

Answer 3

如果您不想拥有一个全局 clicks 变量，您可以将其封装在函数本身中，并且 return 一个 closure.

// Default `clicks` to zero
function trigger(clicks = 0) {

  // Return a new function that increases
  // the click count
  return function () {
    console.log(++clicks);
  }
}

// Call trigger and assign the returned function
// to a new variable called counter
const counter = trigger();

// Move the inline `onclick` listener to the JS
// Call `counter` when the button is clicked
const button = document.querySelector('.trigger');
button.addEventListener('click', counter, false);

<button class="trigger">SUBMIT</button>

通过按下按钮计算点击次数

Counting the number of clicks by pressing a button

javascript

onclick

button

buttonclick

labjs