CODEWITHSUNDEEP
javascriptjquery
wiki11ful
wiki11ful

Reputation: 29

JavaScript-limited click count

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>

Upvotes: 0

Views: 850

Answers (4)

wiki11ful
wiki11ful

Reputation: 29

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

Upvotes: 0

Mulan
Mulan

Reputation: 135187

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>

Upvotes: 0

Som Shekhar Mukherjee
Som Shekhar Mukherjee

Reputation: 8148

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>

Upvotes: 0

Guerric P
Guerric P

Reputation: 31805

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>

Upvotes: 1

Related Questions