我将如何创建一个在点击时显示文本的 javascript 按钮

Question

单击时如何使此按钮显示段落文本？
onClick没有被记录，当我点击按钮时我什至看不到警告消息。

 function displaySong1() { alert("asdasf"); }

 .button { background-color: #8C6D09; color: white; padding: 16px 32px; display: inline-block; margin: 4px 2px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; }.button1 { background-color: #8C6D09; color: #FFF; }

 <button class=".button.button1" onClick="displaySong1()">Easy</button>

Answer 1

您只需设置一个带有 display:none 的段落，并在单击时设置为 display:block。

 function displaySong1() { var p = document.getElementById("paragraph"); p.style.display = "block"; }

 .button { background-color: #8C6D09; color: white; padding: 16px 32px; display:inline-block; margin:4px 2px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; } .button1{ background-color:#8C6D09; color:#FFF; } #paragraph { display:none; } just change display:none to display:block on the paragraph

 <button class="button button1" onclick="displaySong1()">Easy</button> <div id="paragraph"> hello </div>

Answer 2

当你给出特定标签的类名时，你应该避免使用点..

<button class="button button1" onClick="displaySong1()">Easy</button>

Answer 3

您使用.createElement和.appendChild 。

 function displaySong1() { var p = document.createElement("p"); var t = document.createTextNode("asdf"); p.appendChild(t); document.body.appendChild(p); }

 .button { background-color: #8C6D09; color: white; padding: 16px 32px; display: inline-block; margin: 4px 2px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; }.button1 { background-color: #8C6D09; color: #FFF; }

 <button class=".button.button1" onClick="displaySong1()">Easy</button>