HTML onclick handler not triggering innerHTML changes

Question

I am making a hunger games simulation and this is my code:

console.log(data);
document.getElementById("playarea").innerHTML = data;
console.log(document.getElementById("playarea").innerHTML);

When I log the variable data to the console it gives me the following result,

<img src='img/fight.png'><br />
You grabbed a loaf of bread out of the crate, the girl from 9 comes to you for a fight.
<br />
<button onclick=fight('You grabbed a loaf of bread out of the crate, the girl from 9 
comes to you for a fight.','','',4,1,2)>
Punch in the head
</button><br />
<button onclick=fight('You grabbed a loaf of bread out of the crate, the girl from 9 
comes to you for a fight.','','',4,1,2)>Punch in the chest</button><br />

When I log the innerHTML of playarea I get

<img src="img/fight.png"><br>
You grabbed a loaf of bread out of the crate, the girl from 9 comes to you for a fight.
<br>
<button onclick="fight('You" grabbed="" a="" loaf="" of="" bread="" out="" the=""  
crate,="" girl="" from="" 9="" comes="" to="" you="" for="" 
fight.','','',4,1,2)="">
Punch in the head
</button><br>
<button onclick="fight('You" grabbed="" a="" loaf="" of="" bread="" out="" the="" 
crate,="" girl="" from="" 9="" comes="" to="" you="" for=""    
fight.','','',4,1,2)="">
Punch in the chest
</button><br>

In the onclick it is separating each word and treating them like variables.

How can I make the innerHTML to be the same as data variable?

It is better to use jQuery and forget quotes problems. $("#playarea").html(data) — Valijon
– Valijon, Commented Jul 31, 2014 at 14:38

Peter van der Wal · Accepted Answer · 2014-07-31 14:32:43Z

2

Change (within data)

<button onclick=fight('You grabbed ...','','',4,1,2)>

into

<button onclick="fight('You grabbed ...','','',4,1,2)">

You can only ommit the quotes if the value is just one word.

answered Jul 31, 2014 at 14:32

Peter van der Wal

12k2 gold badges24 silver badges29 bronze badges

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

2 Comments

elixenide Over a year ago

+1; this is the answer. To elaborate on this, when you leave out the quotes, the additional words are parsed as attributes of <button>, thus the grabbed="" a="", etc.

Nik Olson Over a year ago

Thanks, it works fine now. I had to use both types of quotes inside of a string so i added + ' " ' + inside of the data variable and it works great!

Collectives™ on Stack Overflow

HTML onclick handler not triggering innerHTML changes

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