如何创建一个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：。

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>