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

标签 javascript html css button

如何让这个按钮在点击时显示段落文本?
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>

最佳答案

你只需要设置一个段落 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>

关于javascript - 我将如何创建一个在点击时显示文本的 javascript 按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45508275/

相关文章:

javascript - 如何知道给定的 latlng 是否在 geojson 多边形坐标内

javascript - 更改 HTML 表格中特定列的背景颜色

jquery - 向 jQuery 代码添加事件监听器

html - 下拉过渡在 Safari 中不起作用

javascript - 下线高度

css - 更改链接的颜色

javascript - 第一个 Vue 组件下方的内容无法呈现

javascript - 策略游戏服务器概念

html - 如何转换xml并保留换行符?

html - 有测试网站吗?