Multiple Actions in Onclick

Page 1 of 1

3 Replies - 511 Views - Last Post: 21 September 2012 - 07:01 AM

#1 TonicX57  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 84
  • Joined: 13-September 08

Multiple Actions in Onclick

Posted 20 September 2012 - 08:48 PM

I'm having a problem in which the moment I add a second action to my onclick event, nothing at all happens when the button is clicked. I'm not sure if it's a basic syntax error or what, but I could certainly use some assistance. Thanks.

<html>
	<head>
		<title>Program #3</title>
	</head>
	<body>
		<p>How much wood would a woodchuck chuck if a woodchuck could chuck wood?</p>
		<input type="button" value="Click for Answer"
			onclick="document.getElementById('outputDiv').innerHTML='<p>I know this joke is old and sucks, but I couldn't think of anything else.</p>';
			alert('A woodchuck would chuck all the wood if a woodchuck could chuck wood.');">
		<hr><div id="outputDiv">
			<p>This joke is a classic.</p>
		</div>
	</body>
</html>


EDIT: Hahaha, in posting this, I noticed the problem thanks to the syntax highlights. My punctuation was causing the onclick to close. Any way I can avoid that?

This post has been edited by TonicX57: 20 September 2012 - 08:50 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Multiple Actions in Onclick

#2 JackOfAllTrades  Icon User is offline

  • Saucy!
  • member icon

Reputation: 5669
  • View blog
  • Posts: 22,517
  • Joined: 23-August 08

Re: Multiple Actions in Onclick

Posted 21 September 2012 - 03:01 AM

Escape the apostrophe with a \ right before it.
Was This Post Helpful? 0
  • +
  • -

#3 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2894
  • View blog
  • Posts: 7,541
  • Joined: 08-June 10

Re: Multiple Actions in Onclick

Posted 21 September 2012 - 03:24 AM

the easiest way to avoid that is by definig the action in the Javascript code, not in the HTML code.
// let’s be modern
var button = document.querySelector("input");
// action 1
button.addEventListener("click", function(evt) {
    document.getElementById('outputDiv').innerHTML = "<p>I know this joke is old and sucks, but I couldn't think of anything else.</p>";
}, false);
// action 2
button.addEventListener("click", function(evt) {
    alert('A woodchuck would chuck all the wood if a woodchuck could chuck wood.');
}, false);

Was This Post Helpful? 0
  • +
  • -

#4 TonicX57  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 84
  • Joined: 13-September 08

Re: Multiple Actions in Onclick

Posted 21 September 2012 - 07:01 AM

View PostJackOfAllTrades, on 21 September 2012 - 04:01 AM, said:

Escape the apostrophe with a \ right before it.

Ah yes, thank you.

View PostDormilich, on 21 September 2012 - 04:24 AM, said:

the easiest way to avoid that is by definig the action in the Javascript code, not in the HTML code.
// let’s be modern
var button = document.querySelector("input");
// action 1
button.addEventListener("click", function(evt) {
    document.getElementById('outputDiv').innerHTML = "<p>I know this joke is old and sucks, but I couldn't think of anything else.</p>";
}, false);
// action 2
button.addEventListener("click", function(evt) {
    alert('A woodchuck would chuck all the wood if a woodchuck could chuck wood.');
}, false);

We haven't quite progressed that much in our class yet.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1