JavaScript-limited click count

Question

I've got a problem with limited click counter using JavaScript. I have tried suggestions below but it seems like my problem might be somewhere else.

HTML/Javascript Button Click Counter

Basically I want to count clicks x times, which is provided from <input type="number"> field. It looks like the script is not recognizing this item in counting function.

Below I'd like to share example code:

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>

Guerric P · Accepted Answer · 2021-05-05T18:44:59.340

1

Just remove the surrounding function and the onclick attribute. Also, move the value retrieval and the disabled logic inside the listener, and convert the value to a number:

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>

edited May 05 '21 at 18:44

answered May 05 '21 at 18:39

Guerric P

30,447
6
48
86

I think you want `if (count >= number) {` because right now if I enter 2, I am able to click it 3 times before the button gets disabled. – WOUNDEDStevenJones May 05 '21 at 18:44
Yes maybe, I just copied the question's condition – Guerric P May 05 '21 at 18:45

Mulan · Answer 2 · 2021-05-05T19:02:12.067

I would recommend something like this. The limit can be increased or decreased at any time to allow for more or less clicks. Once it reaches 0, the button will stop adding to the 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>

score 0 · Answer 3 · answered May 05 '21 at 19:02

You can simply your solution using the snippet below.

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>

wiki11ful · Answer 4 · 2021-05-06T09:41:54.920

I have managed to count the click events with the limit provided by <input type="number"> field and adding data to the array. Additioanlly, I am trying to decrease dynamically the amount of click events and remove last records from array using another button. Basically I have NAN value when I try to get counter value to decrease it. It looks like this: HTML code:

<!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 code:

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;
    }
}

JavaScript-limited click count

4 Answers4