Why isn’t the button triggering the second function?

Question

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.

Element attributes must be uniqe, you cannot have two onclick handlers. You can do this in one onclick handler onclick="document.getElementById('demo').style.display='block';document.getElementById('demoTwo').style.display='block'". — Jake Holzinger
– Jake Holzinger, Commented Jul 9, 2019 at 23:26

Jack Bashford · Accepted Answer · 2019-07-09 23:06:54Z

2

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>

answered Jul 9, 2019 at 23:06

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jake Holzinger Over a year ago

You don't need a function to do this, but it's certainly a good suggestion.

Steven Mount Over a year ago

The teacher wasn’t allowing us to us external files yet. Thanks for the info!

Collectives™ on Stack Overflow

Why isn’t the button triggering the second function?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related