Using Javascript to Toggle CSS Display Setting

Question

I'm trying to build a page where I can post a series of long text (in this particular case, song lyrics). I've followed the code from site doing similar things, but cant seem to make it work. any suggestions? My code is posted below.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="css.css">
    <script>
         <!--
        function toggle(ID) {
            var x = document.getElementById(ID); //get lyrics element
            var xdisplay = x.style.display;    // get CSS display settings

            //Change CSS display setting
            if (xdisplay == none) {
                xdisplay = "block"
            }
            else {
                xdisplay = "none"
            }
            -->
    </script>
</head>
<body>
    <button onclick="toggle(l1)" id="lyric1">Click Here for Lyrics</button><br>
    <button onclick="toggle(l2)" id="lyric2">Click Here for Lyrics</button><br>
    <button onclick="toggle(l3)" id="lyric3">Click Here for Lyrics</button><br>

    <p class=lyric id=l1> Lyrics 1 </p>
    <p class=lyric id=l2> Lyrics 2 </p>
    <p class=lyric id=l3> Lyrics 3 </p>

</body>
</html>

CSS:

.lyric {
    display: none;
}

Djaouad · Accepted Answer · 2017-09-23 23:04:50Z

4

You're missing quotations all around your code.
You're not passing valid id's, you're passing variable names instead of strings.
To get a css rule that was set in css, use getComputedStyle instead of style.
To change the style, don't use the string that holds the current one, instead use the style attribute.

function toggle(ID) {
  var x = document.getElementById(ID); //get lyrics element
  var xdisplay = getComputedStyle(x, null).display; // get CSS display settings
  //Change CSS display setting
  //Change x.style.display, not xdisplay
  if (xdisplay == "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

.lyric {
  display: none;
}

<button onclick="toggle('l1')" id="lyric1">Click Here for Lyrics</button><br> <!-- changed l1 to 'l1' -->
<button onclick="toggle('l2')" id="lyric2">Click Here for Lyrics</button><br> <!-- changed l2 to 'l2' -->
<button onclick="toggle('l3')" id="lyric3">Click Here for Lyrics</button><br> <!-- changed l3 to 'l3' -->

<p class="lyric" id="l1"> Lyrics 1 </p> <!-- changed l1 to "l1" and lyric to "lyric" -->
<p class="lyric" id="l2"> Lyrics 2 </p> <!-- changed l2 to "l2" and lyric to "lyric" -->
<p class="lyric" id="l3"> Lyrics 3 </p> <!-- changed l3 to "l3" and lyric to "lyric" -->

edited Sep 23, 2017 at 23:04

answered Sep 23, 2017 at 22:19

Djaouad

22.8k4 gold badges37 silver badges57 bronze badges

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

3 Comments

M. Winter Over a year ago

Thanks for the clear answer. Tag on question, is it possible to restore the display setting for l1 when another button is pressed?

Djaouad Over a year ago

@M.Winter If by restore you mean display:none, use a condition: if (ID !== 'l1') { x.style.display = 'none'; }.

Rick Hellewell Over a year ago

The use of xdisplay fixed a problem I had with the use of display in the recommended toggle code used at W3School. With the W3Schools code, the first button click was ignored, but subsequent clicks toggled display OK. By using xdisplay, the first click works properly. And that's why you got an up-vote after all this time. Thanks, @MrGeek !

clabe45 · Accepted Answer · 2017-09-23 22:14:59Z

0

You are copying the value of x.style.display to xdisplay, and then setting xdisplay to other values. Instead, try:

if (xdisplay == "none") {
    x.style.display = "block";
} else {
    x.style.display = "none";
}

answered Sep 23, 2017 at 22:14

clabe45

2,47418 silver badges27 bronze badges

Comments

Yaser Morteza · Accepted Answer · 2017-09-23 23:04:30Z

0

You are using wrong codes, as you missed some quotation marks and a curly bracket ,

First solve your syntax errors then , try this js code it works fine:

    function toggle(ID) {
        var x = document.getElementById(ID); 
        var xdisplay = x.getAttribute("class");  

        if (xdisplay) {
            x.removeAttribute("class");
        }
        else {
            x.setAttribute("class", "lyric");
        }
    }

answered Sep 23, 2017 at 23:04

Yaser Morteza

11 silver badge2 bronze badges

Collectives™ on Stack Overflow

Using Javascript to Toggle CSS Display Setting

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related