在按钮单击时使文本出现/消失[重复]答案

【问题标题】：Make text appear/disappear on button click [duplicate]在按钮单击时使文本出现/消失[重复]
【发布时间】：2019-03-31 15:29:35
【问题描述】：

我正在尝试使按钮交替使用“无”隐藏文本以使用“块”显示。我尝试了以下方法，但没有成功

<p id='demo' style = 'display: none'>Hello Javascript</p>     
<button type='button' onclick="document.getElementById('demo').style.display='block'" >click me</ button>

我想将事件监听器转换为 Javascript 并从那里运行。

【问题讨论】：

标签： javascript css html dom-events

【解决方案1】：

试试这个，希望对你有帮助。谢谢

function toggleText() {
  var text = document.getElementById("demo");
  if (text.style.display === "none") {
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}

<p id='demo' style='display: none'>Hello Javascript</p>     
<button type='button' onclick="toggleText()">Click me</button>

【讨论】：

如果对您有帮助，请标记为正确。谢谢

【解决方案2】：

css：

.demo {
   display: none;
}

html：

<p id='demo' class='demo'>Hello Javascript</p>
<button type='button'> click me </button>

js:

var tag = document.getElementById('demo');
var button = document.querySelector('button');
button.addEventListener('click', function(){
tag.classList.toggle('demo');
});

运行片段：

var tag = document.getElementById('demo');
var button = document.querySelector('button');
button.addEventListener('click', function(){
tag.classList.toggle('demo');
});

.demo {
   display: none;
}

<p id='demo' class='demo'>Hello Javascript</p>
<button type='button'> click me </button>

【讨论】：

我尝试运行您的代码但没有运行并且没有错误
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <style> .demo { display: none; } </style> </head> <body> <p id="demo" class="demo">hey</p> <button type="button">click</button> <script type="text/javascript"> var tag = document.getElementById('demo'); var button = document.querySelector('button'); button.addEventListener('click', function(){ tag.classList.toggle('demo'); }); </script> </body> </html>
确保脚本标签位于文档底部
querySelector 是采用类型按钮还是按钮标签？
querySelector 正在接受按钮标签

【解决方案3】：

有帮助吗：

var showHide = document.getElementById("showHide");
var demo = document.getElementById("demo");
showHide.onclick = function() {
  if (demo.style.display == "block") {
    demo.style.display = "none";
  } else {
    demo.style.display = "block";
  }
}

<p id='demo' style='display: none'>Hello Javascript</p>
<button id="showHide">Click Me</button>

【讨论】：