How click one of the button show its value

Question

The following code show three buttons, I want click the one show its value. I try bt[i].firstChild.nodeValue or bt[i].innerHTML all not work.

<script type="text/javascript">  
window.onload=function(){
    var bt = document.getElementsByTagName('button');
    for (var i=0;i<bt.length;i++){
        bt[i].onclick = function(){
            alert(bt[i].firstChild.nodeValue);      //TypeError: bt[i] is undefined
        };
    }
}
</script>

<button id="first">First</button>
<button id="second">Second</button>
<button id="third">Third</button>

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection — Dexygen, May 05 '19 at 12:01
The onclick function you are creating does is not aware of what `i` is, since it will be run when the button is clicked and the cycle will be long be finished — Francesco, May 05 '19 at 12:01

Serhii Onishchenko · Answer 1 · 2019-05-05T12:47:53.890

0

Try to implement this code using EventListener and loops for attaching for each button 'click' event listener:

const buttons = document.getElementsByTagName("button");
for(let i = 0; i<buttons.length; i++) {
 buttons[i].addEventListener("click", getValue);
}

function getValue() {
  console.log(this.innerHTML);
}

<button id="first">First</button>
<button id="second">Second</button>
<button id="third">Third</button>

end read about JavaScript HTML DOM EventListener

edited May 05 '19 at 12:47

answered May 05 '19 at 12:42

Serhii Onishchenko

921
8
18

Don't dump code and say "Try this...". Explain what you did and why/how it works. – Asons May 05 '19 at 12:44

How click one of the button show its value

1 Answers1