Javascriptを使用してCSS表示を切り替える設定

長いテキスト（この場合は歌詞）を投稿できるページを作成しようとしています。私は同じようなことをしているサイトのコードに従ってきましたが、それを動作させるように思われません。助言がありますか？私のコードは以下の通りです。Javascriptを使用してCSS表示を切り替える設定

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; 
}

出典

2017-09-23 M. Winter

。
有効なIDを渡していません。文字列ではなく変数名を渡しています。
cssで設定されたCSSルールを取得するには、styleの代わりにgetComputedStyleを使用します。
スタイルを変更するには、現在のスタイルを保持する文字列を使用せず、代わりにスタイル属性を使用します。あなたには、いくつかの引用符と中括弧を逃したとしてあなたは、間違ったコードを使用している

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" -->

出典

2017-09-23 22:19:40

ありがとうございました。問題のタグは、別のボタンが押されたときにl1の表示設定を復元することは可能ですか？ –

@ M.Winter復元によって 'display：none'を意味する場合は、条件を使用します：' if（ID！== 'l1'）{x.style.display = 'none'; } '。 –

あなたはxdisplayにx.style.displayの値をコピーして、他の値にxdisplayを設定しています。代わりに、試してください：あなたはすべてのコードの周りの引用を逃している

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

出典

2017-09-23 22:14:59 clabe45

、

まず、あなたの構文エラーを解決し、それが正常に動作し、これはコードをJS試します：

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

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

出典

2017-09-23 23:04:30

Javascriptを使用してCSS表示を切り替える設定

答えて

関連する問題