Question

我用HTML创建了一个按钮，希望它显示然后隐藏一个文本块。是否可以仅使用JavaScript的一个底部做到这一点？我的意思是，通过单击按钮，文本块应出现在<p id="text"></p>中，当再次单击时，该文本块将变为隐藏。在我的代码中，仅显示了文本块，但无法将其隐藏。
我的代码：

<button type="button" onclick="rulesEnglish()">Rules</button>
<p id="text"></p>

// js：

function rulesEnglish() {
  document.getElementById('text').innerHTML = 'text block';
}

Answer 1

切换（隐藏/显示）元素

function rulesEnglish() {
   var x =document.getElementById('text');
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

<button type="button" onclick="rulesEnglish()">Rules</button>

<div id="text" style="display:none">text block</div>

Answer 2

如果我了解您的问题，您可以尝试以下问题：

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title> test</title>
    <script type="text/javascript">
    function rulesEnglish(){
      var pa = document.getElementById("text");
      if (pa.style.display === "none") {
        pa.style.display = "block";
        pa.innerHTML = 'text block';//if you want write a text...
      } else {
        pa.style.display = "none";
      }
    }
    </script>
    </head>
    <body>
    <button type="button" onclick="rulesEnglish()">Rules</button>
    <p id="text">My Text</p>
    
    </body>
    </html>

是否可以使用javascript仅用一个按钮显示然后关闭一个文本块？

2 个答案: