javascript - 为什么按钮不触发第二个功能？

Question

我正在尝试通过一个按钮触发两个功能。有人可以帮助我做错什么吗？

我知道我可以从功能二添加功能一的文本，但我的目标是在一个按钮下完成两个功能。

<p id="demo" style="display:none">JavaScript can show hidden HTML elements.</p>

<p id="demoTwo" style="display:none">Hello JavaScript!</p>

<button type="button" onclick="document.getElementById('demo').style.display='block'" onclick="document.getElementById('demoTwo').style.display='block'">Click Me!</button>

我希望两个函数的文本都出现在按钮单击时。但是，只完成了第一个功能。

Answer 1

你需要添加一个函数才能做到这一点:

onclick="showDemos()"

然后在你的 JavaScript 中:

function showDemos() {
  document.getElementById("demo").style.display = "block";
  document.getElementById("demoTwo").style.display = "block";
}

function showDemos() {
  document.getElementById("demo").style.display = "block";
  document.getElementById("demoTwo").style.display = "block";
}

<p id="demo" style="display:none">JavaScript can show hidden HTML elements.</p>

<p id="demoTwo" style="display:none">Hello JavaScript!</p>

<button type="button" onclick="showDemos()">Click Me!</button>

通常不鼓励内联监听器 - 您应该使用 addEventListener:

function showDemos() {
  document.getElementById("demo").style.display = "block";
  document.getElementById("demoTwo").style.display = "block";
}

document.getElementById("button").addEventListener("click", showDemos);

<p id="demo" style="display:none">JavaScript can show hidden HTML elements.</p>

<p id="demoTwo" style="display:none">Hello JavaScript!</p>

<button type="button" id="button">Click Me!</button>