如何通過單擊按鈕顯示隱藏文本？

Question

 function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display = "none") { x.style.display = "block"; } else { x.style.display = "none"; } }

 <ul> <li><button onclick="myFunction()">Try it</button> <div id="myDIV"><p>This is my DIV element.</p></div </li> </ul>

在 css 文件中，我包含了命令：#myDIV{ display: none; 因為否則一開始文本不會被隱藏。 使用此代碼，文本首先被隱藏，如果我單擊按鈕，它會顯示文本。 但是，如果我再次單擊該按鈕，它應該關閉它沒有關閉的文本。 有人可以幫我嗎？ 謝謝！

Answer 1

將此設置為 HTML

<div id="myDIV" style="display: none;"><p>This is my DIV element.</p></div>

和這個 javascript

function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display == "none") {
        x.style.display = "block";
    } else {
       x.style.display = "none";
      }
}

這現在將起作用，因為 display none 默認情況下不是 div 元素，因此 javascript 將看不到 display none 樣式並且不會執行該功能。 所以你需要指定 style display none 並且該功能將正常工作

Answer 2

=是賦值。 ==和===是比較。 所以在if里面，把它改成這兩個之一。

您也沒有正確關閉您提交的代碼中的<div> 。

另一件事是您在 CSS 文件中設置display: none 。 JavaScript 無法訪問此值，它只能訪問元素的 HTML 標記中的style="..." 。 要解決此問題，請檢查它是否未隱藏並在if/else塊的兩側交換。

 function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display == "block") { // `=` to `==` or `===` x.style.display = "none"; } else { x.style.display = "block"; } }

 #myDIV { display: none; }

 <ul> <li><button onclick="myFunction()">Try it</button> <div id="myDIV"> <p>This is my DIV element.</p> </div> <!-- this div wasn't closed properly --> </li> </ul>

Answer 3

 function myFunction() { var x = document.getElementById("myDIV"); x.style.display = x.style.display != "block"?"block":"none" }

 #myDIV{ display: none; }

 <ul> <li><button onclick="myFunction()">Try it</button> <div id="myDIV"><p>This is my DIV element.</p></div </li> </ul>