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

如何在点击时使此按钮显示段落文本？
onClick没有被记录，当我单击按钮时我甚至看不到警报消息。我将如何创建一个显示点击文本的javascript按钮

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>

来源

2017-08-04 demis

尝试使用的onclick代替的onClick – scaisEdge

你在控制台中的任何错误？警报出现在我的浏览器中没有任何问题.... –

请确保将onClick更改为onclick（全部小写） – Ali

你只需要设定与显示一个段落：无，并设置为display：block当你点击。

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>

来源

2017-08-04 13:50:09

这里是完整的代码，因为它似乎仍然不起作用： – demis

实际上，我忘记了一个分号。 –

@demis如果这个例子不适合你，问题不在js中。 – Petroff

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

回答

相关问题