使用 JavaScript 对许多默认值为“0”的按钮进行点击计数

Question

我想使用 JavaScript 中的点击计数函数来测量 otree 中按钮的点击次数。数据应使用隐藏的输入字段存储在数据库中。

如果按钮没有被点击，函数应该存储值“0”，如果按钮被点击，函数应该存储点击次数。 objective 是为了避免由于输入字段为空而在 otree 中出现错误消息。另外，我想为很多按钮（10-20个按钮）使用该功能。

非常感谢！

<button type="button" onclick="buttonClicked('num_clicks', 'num_clicks_feedback')">Click me</button>

<span id="num_clicks_feedback"></span>

<input type="hidden" name="num_clicks" id="num_clicks"/>

<script>
    let numClicks = 0;

    function buttonClicked(id, id_2) {
        numClicks++;
        // this stores it in the database
        document.getElementById(id).value = numClicks;
        // this just displays it back to the user
        document.getElementById(id_2).innerText = numClicks;
    }
</script>```

Answer 1

您可以将 this 传递给 buttonClicked() 函数，然后将点击计数器存储为按钮本身的属性。

function buttonClicked(btn) {
  btn.click_counter = (btn.click_counter || 0) + 1;

  document.getElementById('num_clicks_feedback').textContent =
    `btn ${btn.getAttribute('data-id')} has been clicked ${btn.click_counter} times`;
}

<button data-id="foo" onclick="buttonClicked(this)">Click me</button>
<button data-id="bar" onclick="buttonClicked(this)">Click me</button>
<button data-id="steve" onclick="buttonClicked(this)">Click me</button>
<button data-id="321" onclick="buttonClicked(this)">Click me</button>
<button data-id="submit" onclick="buttonClicked(this)">Click me</button>
<button data-id="abort!" onclick="buttonClicked(this)">Click me</button>

<p id="num_clicks_feedback"></p>

然后当你想更新数据库时，你可以从按钮中获取属性值。

document.querySelector('button[data-id="submit"]').click_counter || 0;

注意：如果您绝对必须使用 <input>，它的值将始终为字符串类型。所以除非你转换它，否则如果你稍后尝试用它做数学运算，你可能运行会变成一些问题。

使用 JavaScript 对许多默认值为“0”的按钮进行点击计数

Click count using JavaScript for many buttons with default value '0'

html

javascript

jquery

onclick