How can i return 2 values with getElementsByClassName()?

Question

<!DOCTYPE html>
<html>
<body>

<div class="example">First div element with class="example".</div>

<div class="example">Second div element with class="example".</div>

<p>Click the button to change the text of the first div element with class="example" (index 0).</p>

<button onclick="myFunction()">Try it</button>

<p><strong>Note:</strong> The getElementsByClassName() method is not supported in Internet Explorer 8 and earlier versions.</p>

<script>
function myFunction() {
    var x = document.getElementsByClassName("example");
    x[0].innerHTML = "Hello World!";
}
</script>

</body>
</html>

Link for example: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_getelementsbyclassname

This example show us how to change first div to "hello world". I wanna learn how can i change all classes to "Hello world". I tried to change x[0].innerHTML = "Hello World!"; to x[*].innerHTML = "Hello World!"; but nothing happened. Any idea? :/

It maybe a duplicate, but the asker doesn't seem to understand that he needs the loop... — j.kaspar, Apr 16 '16 at 08:51

score 0 · Answer 1 · answered Apr 16 '16 at 08:46

0

You have to use a loop in order to affect all of the elements:

function myFunction() {
    var x = document.getElementsByClassName("example");
    for (var i = 0; i < x.length; i++)
        x[i].innerHTML = "Hello World!";
}

answered Apr 16 '16 at 08:46

Osvaldas

160
1
12

score 0 · Accepted Answer · answered Apr 16 '16 at 08:52

Use loop as:

<!DOCTYPE html>
<html>
<body>

<div class="example">First div element with class="example".</div>

<div class="example">Second div element with class="example".</div>

<p>Click the button to change the text of the first div element with class="example" (index 0).</p>

<button onclick="myFunction()">Try it</button>

<p><strong>Note:</strong> The getElementsByClassName() method is not supported in Internet Explorer 8 and earlier versions.</p>

<script>
function myFunction() {
    var x = document.getElementsByClassName("example");
    for(var i = 0; i < x.length; i++)
    x[i].innerHTML = "Hello World!";
}
</script>

</body>
</html>

score 0 · Answer 3 · answered Apr 16 '16 at 08:52

0

You can use querySelectorAll method:

function myFunction() {
    var divs = document.querySelectorAll('.example');
    [].forEach.call(divs, function(div) {
        div.innerHTML = "Hello World!";
    });
}

answered Apr 16 '16 at 08:52

n-dru

9,285
2
29
42

How can i return 2 values with getElementsByClassName()?

3 Answers3