how to show content on button click using JavaScript

Question

So far I have tried this, but it is not working. If I change the footer to div in this Line var x = document.getElementsByTagName("footer"); than it show all the div in my code,I also do not want this.

Can anyone help me by telling what is wrong in this code and how to make this code working ?

HTML

<p> name:</p> <div> john</div>
<p> class: </p> <div> English</div>
<p> email: </p> <div> [email protected]</div>
<footer>
    <button onclick="show()">Contact</button>
    <p id="first"></p>
    <p id="second"></p>
    <p id="third"></p>
</footer>

JS

function show() {
    var x = document.getElementsByTagName("footer");
    document.getElementById("first").innerHTML =
    'first div: ' + x[0].innerHTML;

    document.getElementById("second").innerHTML =
    'second div: ' + x[1].innerHTML;

    document.getElementById("third").innerHTML =
    'third div: ' + x[2].innerHTML;
    }

Can you put some class or id to your divs? Otherwise all divs will be returned using this code - document.getElementsByTagName("div"); — mmk
– mmk, Commented Nov 21, 2019 at 10:22

Damian Peralta · Accepted Answer · 2019-11-21 10:22:51Z

2

You have some errors:

You have only one footer, I guess you want to get the content of all divs. Your id's are wrong, "firstHere" doesn't exists, but "first" does, same for the second and third ids.

UPDATE: You can add a class to your divs (if you have another divs in the page but you want to ignore them).

To get several elements, you can also use querySelectorAll, using a css selector as argument.

Try this:

function show() {
    var x = document.querySelectorAll(".your-class");
    document.getElementById("first").innerHTML =
    'first div: ' + x[0].innerHTML;

    document.getElementById("second").innerHTML =
    'second div: ' + x[1].innerHTML;

    document.getElementById("third").innerHTML =
    'third div: ' + x[2].innerHTML;
    }

<p> name:</p> <div class="your-class"> john</div>
<p> class: </p> <div class="your-class"> English</div>
<p> email: </p> <div class="your-class"> [email protected]</div>
<footer>
    <button onclick="show()">Contact</button>
    <p id="first"></p>
    <p id="second"></p>
    <p id="third"></p>
</footer>

edited Nov 21, 2019 at 10:22

answered Nov 21, 2019 at 10:15

Damian Peralta

1,8969 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jamie Southwell Over a year ago

I have also tried this, I do not want this because I have other div in my code too.

Damian Peralta Over a year ago

Then add a class to your divs

Hugo Sohm · Accepted Answer · 2019-11-21 10:18:42Z

0

The argument of document.getElementById need to be the same than your id in the html

Here how to do this:

function show() {
    var x = document.getElementsByTagName("div");
    document.getElementById("first").innerHTML =
    'first div: ' + x[0].innerHTML;

    document.getElementById("second").innerHTML =
    'second div: ' + x[1].innerHTML;

    document.getElementById("third").innerHTML =
    'third div: ' + x[2].innerHTML;
}

Here the manual for document.getElementById

answered Nov 21, 2019 at 10:18

Hugo Sohm

3,4306 gold badges28 silver badges45 bronze badges

1 Comment

Jamie Southwell Over a year ago

Yes, the id were not same. I have updated the question. Using div cause problems because I have other div in my code too, how to handle this ?

Collectives™ on Stack Overflow

how to show content on button click using JavaScript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related