クリック時にテキストを表示する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

あなただけの表示で段落を設定する必要があります。あなたがクリックしたときにブロック：なしと表示に設定します。

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

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

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