-2

I create a lot of h1 whose class names are the same as below.

<h1 class="h1">One</h1>
<h1 class="h1">Two</h1>
<h1 class="h1">Three</h1>
<h1 class="h1">Four</h1>

Also create a button which will show values of these elements

<button id="button">Show</button>

And by clicking I want to show all the values of the elements with class "h1"

const button = document.getElementById('button');
var h1 = document.getElementsByClassName('h1');
button.addEventListener('click', function(){
    for (var i = 0; i<=h1.lenght; i++){
        alert(h1[i].value);
    }
});

But nothing is showing.

connexo
  • 53,704
  • 14
  • 91
  • 128
Shyngys Rakhad
  • 196
  • 2
  • 4
  • 16
  • 2
    You have a typo in `lenght`. Also, `

    ` elements don't have a `value` attribute. Form elements do. Finally, since arrays are zero-indexed in JavaScript, you want `<`, not `<=`

     – j08691 Jan 19 '18 at 18:24
  • 1
    `

    ` does not have a `value`. It does have `innerHTML`. `value` is restricted to input-type elements.

     – connexo Jan 19 '18 at 18:26
  • There has to be a dupetarget for @connexo's observation... (For instance: https://stackoverflow.com/questions/24745293/find-a-value-of-table-cell, https://stackoverflow.com/questions/42759529/unable-to-calculate-and-display-tb-in-javascript) – T.J. Crowder Jan 19 '18 at 18:26
  • Probably. If only this site had decent search functionality. – connexo Jan 19 '18 at 18:29
  • Also where did you include the script, in the head tag ? If so you will have to wait for the DOM to be ready to bind the events. Or you can include the script just before the end of the body closing tag. – Sushanth -- Jan 19 '18 at 18:31
  • @connexo: :-) Found a couple... – T.J. Crowder Jan 19 '18 at 18:31
  • Event if the `

    ` tag has no `value` attribute, we are atleast expected to see `undefined` in the alert. @connexo

     – Sushanth -- Jan 19 '18 at 18:32
  • Possible duplicate of [Unable to calculate and display TB in javascript](https://stackoverflow.com/questions/42759529/unable-to-calculate-and-display-tb-in-javascript) – connexo Jan 19 '18 at 18:33
  • @T.J.Crowder Your first find is actually a reverse dupe :D – connexo Jan 19 '18 at 18:34
  • @connexo: I don't follow you. The questions are both using `value` where they should use `innerHTML`...? Of course, now the question's been edited to use `input` instead of `h1`... Moving target. – T.J. Crowder Jan 19 '18 at 19:08
  • In the first dupe you linked OP tried to read stuff using `innerHTML` from table cells while what he needed was `value` from a `input`s inside those table cells. – connexo Jan 19 '18 at 19:10
  • @T.J.Crowder This should definitely be marked as a duplicate, not put on hold due to being off-topic. I have rolled back OPs edit since he introduced additional errors with the edit. – connexo Jan 19 '18 at 19:19

1 Answers1

1

You had a typo at length and also if you use <= it will go out of range so you should use < and .innerHTML for your original One, after the edit if you want to get value of inputs , you should use .value

const button = document.getElementById('button');

var h1 = document.getElementsByClassName('h1');
button.addEventListener('click', function(){
   for (var i = 0; i<h1.length; i++){
     console.log(h1[i].innerHTML);

}
});
feiiiiii
  • 1,480
  • 1
  • 12
  • 27