Counting the number of clicks by pressing a button

Question

I am new to coding and using Lab.JS for a project. I have a button that when pressed, it counts the number of clicks made and then logs it in the console. It is important that the number of clicks isn't shown on screen when the button is pressed and is hidden away from the person pressing the button. I just want the clicks to be counted, but I am not sure how to fix the code iAny help would be appreciated.

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

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

You have a typo. It is actually [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML). — palaѕн, Mar 06 '20 at 11:40
``innerHTML`` typo, here ``HTML`` is **capital** not small case(html). — Not A Bot, Mar 06 '20 at 11:41
Also, you do not have any button with id `submit` in your html code and in your js code you are using `document.getElementById("submit")` — palaѕн, Mar 06 '20 at 11:48
Yeah sorry, I rewrote it quickly with those errors. They weren't there before, it was just typos on my behalf since I didn't copy and paste it over. The main problem is that every time i press the button it counts the number of clicks and shows it onscreen. I just want the button to be fixed to say "SUBMIT" and have the onclick value hidden. — , Mar 06 '20 at 11:54

score 0 · Answer 1 · answered Mar 06 '20 at 11:54

Please try this code.

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

As long as you make your variable global. It's value will be save only for that page until user will close the page or tab.

score 0 · Answer 2 · answered Mar 06 '20 at 12:00

0

Instead of updating the HTML of button you can add a new div and update it with count like:

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>

answered Mar 06 '20 at 12:00

palaѕн

72,112
17
116
136

Thank you for this. Seems to work as well and I can hide the value on the screen. Helps me a lot! – Mar 06 '20 at 12:04

score 0 · Accepted Answer · answered Mar 06 '20 at 12:08

If you didn't want to have a global clicks variable you could encapsulate it within the function itself, and return a 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

3 Answers3

Linked