CODEWITHSUNDEEP
javascripthtml
Steven Mount
Steven Mount

Reputation: 11

Why isn’t the button triggering the second function?

I am attempting to get two functions to trigger with one button. Could someone help me what I did wrong?

I know that I can just add the text from function one from function two, but my goal was to complete two functions under one button.

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

I was wanting both function’s text to appear at the button click. However, only the first function completed.

Upvotes: 1

Views: 42

Answers (1)

Jack Bashford
Jack Bashford

Reputation: 44087

You need to add a function to be able to do that:

onclick="showDemos()"

Then in your 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>

Inline listeners are generally discouraged - you should use 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>

Upvotes: 2

Related Questions