Incrementing an HTML button in JS

Question

I'm doing the 10 days of JS on Hackerrank and I'm stuck on day 9 where you have to make a button and on each press it increments the number on the button by one. I've written this code but it doesn't seem to do anything. The button looks fine but the onclick doesn't work. I also want to do this without writing something along the lines of onclick="increment()" in the html code because I can already do that. To test my code I went into w3schools.com and found a random test and replaced the code with my own:

var btn = document.getElementById('btn');
var i = 0;

btn.onclick = function() {
  i++;
  btn.innerHTML = i;
};

.btnClass {
  width: 96px;
  height: 48px;
  font-size: 24px;
  background: #4FFF8F;
}

<h2>The Button Element</h2>
<button id="btn" class="btnClass">0</button>

You need to move the script to the bottom of the `body` or run it in a "document ready" handler. The problem is that because the script is higher in the file than where the button is defined, it does not yet exist in the document when the script it parsed and executed. — jmoerdyk, Oct 03 '18 at 21:05
Aren't you getting an error in the JavaScript console? That might have given you a clue about the problem. — Barmar, Oct 03 '18 at 21:41

score 1 · Answer 1 · answered Oct 03 '18 at 21:20

If you want to keep your JS in the head, you can also wrap it in window.onload to keep things tidy.

<!DOCTYPE html>
<html>
<style>
.btnClass {
    width: 96px;
    height: 48px;
    font-size: 24px;
    background: #4FFF8F;
}
</style>

<script>
    window.onload = function() {    
        var btn = document.getElementById('btn');
        var i = 0;

        btn.onclick = function () {
            i++;
            btn.innerHTML = i;
        };
    }
</script>

<body>
<h2>The Button Element</h2>
<button id="btn" class="btnClass">0</button>
</body>
</html>

With window.onload, your js will "see" your button, because the page has been fully loaded.

score 0 · Accepted Answer · answered Oct 03 '18 at 21:06

0

You JavaScript is parsed and executed before your button is in a page. Just move your script below button or attach even that will execute your code once the page is loaded.

Your HTML and Script should look like this:

<!DOCTYPE html>
<html>
<style>
.btnClass {
    width: 96px;
    height: 48px;
    font-size: 24px;
    background: #4FFF8F;
}
</style>
<body>

<h2>The Button Element</h2>
<button id="btn" class="btnClass">0</button>
<script>

    var btn = document.getElementById('btn');
    var i = 0;

    btn.onclick = function () {
        i++;
        btn.innerHTML = i;
    };


</script>
</body>
</html>

answered Oct 03 '18 at 21:06

Senad Meškin

13,597
4
37
55

Wow, you're a life saver, I could have sworn I had tried that. Maybe I had some errors that I removed while trying to fix the problem. – Sancho Jimenez Oct 03 '18 at 21:10
You are welcome my friend, it happens to all of us. – Senad Meškin Oct 03 '18 at 21:11

score 0 · Answer 3 · answered Oct 03 '18 at 21:18

Your Javascript was being processed before your HTML had been loaded into the DOM (Document Object Model) due to you putting your JS before your HTML...

You could switch this around as the answer from Senad, however... a safer way to execute Javascript which manipulates the DOM is to wait until the DOM has been fully loaded.

Below is some code which fixes your issue by listening out for the DOMContentLoaded event and will work no matter where you load your Javascript.

document.addEventListener('DOMContentLoaded', function(){

console.log("DOM Loaded");

//Wait to add event listeners until the DOM is fully loaded. This is needed
// when wanting to access elements that are later in the HTML than the <script>.
  var btn = document.getElementById('btn');
  var i = 0;

  btn.addEventListener('click', function(el) {
      i++;
      btn.innerHTML = i;
      console.log("clicked")
  });

});

score -3 · Answer 4 · answered Oct 03 '18 at 21:06

-3

I take a look at this link: https://www.w3schools.com/jsref/event_onclick.asp

I think the id inside of your button should be an onclick Event.

Hope this helps.

answered Oct 03 '18 at 21:06

Lidian Vilazio

1
1

1

he already use onclick event. please read code first – Ugur Eren Oct 03 '18 at 21:10

Incrementing an HTML button in JS

4 Answers4