'How would i create a javascript button that shows text on click

How can i make this button display paragraph text when clicked?
The onClick is not being recorded and I cannot even see the alert message when I click the button.

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>
javascripthtmlcssbutton


Solution 1:[1]

you just have to set a paragraph with display:none and set to display:block when you click.

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>

Solution 2:[2]

You should avoid to use dot when you give the classname of specific tag..

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Tariq Ahmed

Related Questions