JavaScript 限制的点击次数答案

【问题标题】：JavaScript-limited click countJavaScript 限制的点击次数
【发布时间】：2021-05-05 18:32:34
【问题描述】：

我遇到了使用 JavaScript 的点击计数器有限的问题。我尝试了以下建议，但似乎我的问题可能出在其他地方。

基本上我想计算点击次数 x 次，这是由<input type="number"> 字段提供的。脚本在计数功能中似乎无法识别此项目。

下面我想分享示例代码：

function myFunction() {
  var count = 0;
  var number = document.getElementById("amount").value;
  var btn = document.getElementById("clickme");
  var disp = document.getElementById("clicked");
  btn.onclick = function() {
    count++;
    disp.innerHTML = count;
  }
  if (count > number) {
    btn.disabled = true;
  }
}

<!DOCTYPE html>
<html>

<body>


  <input type="number" id="amount">
  <p>how many times button should be clicked</p>

  <p>Click the button.</p>
  <div id="clicked"></div>

  <button id="clickme" onclick="myFunction()">Click me</button>


  <script>
  </script>

</body>

</html>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

只需删除周围的功能和onclick 属性。此外，将值检索和禁用的逻辑移动到侦听器中，并将值转换为数字：

let count = 0;
const btn = document.getElementById("clickme");
const disp = document.getElementById("clicked");
const amount = document.getElementById("amount");
btn.onclick = function () {
    count++;
    disp.innerHTML = count;
    const number = +amount.value;
    if (count > number) {
        btn.disabled = true;
    }
}

<input type="number" id="amount" >
<p>how many times button should be clicked</p>

<p>Click the button.</p>
<div id="clicked"></div>

<button id="clickme">Click me</button>

【讨论】：

我想你想要if (count >= number) {，因为现在如果我输入 2，我可以在按钮被禁用之前单击它 3 次。
是的，也许，我只是复制了问题的条件

【解决方案2】：

您可以使用下面的 sn-p 来简单地解决您的问题。

let count = 0;
const inp = document.getElementById("amount");
const countEl = document.getElementById("clicked");


function myFunction(e) {
  if (++count >= Number(inp.value)) e.target.disabled = true;
}

<input type="number" id="amount">
<p>How many times button should be clicked</p>
<p>Click the button.</p>
<button id="clickme" onclick="myFunction(event)">Click me</button>

【讨论】：

【解决方案3】：

我会推荐这样的东西。 limit 可以随时增加或减少，以允许更多或更少的点击。一旦到达0，按钮将停止添加到count -

const f =
  document.forms.myapp

function update (event) {
  const limit = Number(f.limit.value)
  if (limit <= 0) return 
  f.limit.value = limit - 1
  f.count.value = Number(f.count.value) + 1
}

f.mybutton.addEventListener("click", update)

<form id="myapp">
  <input type="number" name="limit" value="10">
  <button type="button" name="mybutton">click me</button>
  <output name="count">0</output>
</form>

【讨论】：

【解决方案4】：

我已经设法用<input type="number"> 字段提供的限制来计算点击事件，并将数据添加到数组中。另外，我正在尝试动态减少点击事件的数量并使用另一个按钮从数组中删除最后的记录。基本上，当我尝试获取计数器值来减少它时，我有 NAN 值。它看起来像这样： HTML 代码：

<!DOCTYPE html>
<html>
<body>
  <input type="number" id="amount">
  <p>how many times button should be clicked</p>
 <p> Add question</p> <input type="text" id="question">
  <p>Click the button.</p>
  <div id="clicked"></div>

  <button id="clickme" >add me</button>
  <button id="delme">
  delete me
  </button>
</body>
</html>

JS代码：

var count = 0;
var i=0;
const btn = document.getElementById("clickme");
const disp = document.getElementById("clicked");
var amount = document.getElementById("amount");
var question = document.getElementById("question");
var tab;
btn.onclick = function () {
    count++;
    disp.innerHTML = count;
    var number = +amount.value;
    tab=new Array(number);
    
   tab[i]=question.value;
    console.log(tab[i] + i);
    question.value=" ";
    i++;
    
    if (count == number) {
        btn.disabled = true;
    }
}

var delbtn=document.getElementById("delme");
var countdown = parseInt(document.getElementById("clicked"));

delbtn.onclick = function () {
    console.log(countdown);
    countdown--;
    disp.innerHTML = countdown;
    
    if (countdown == 0) {
        btn.disabled = true;
    }
}

【讨论】：