Javascript onclick replace entire inner html of div content

Question

When they click on THEATER it should change to NORMAL with a new function in place

example from:

<div id="links">
<a onClick="refreshStream()" onmouseover="color:red;" style="cursor: pointer;" draggable="false" oncontextmenu="return false;">&nbsp;&nbsp; REFRESH</a>
<a onClick="TheaterMode()" onmouseover="color:red;" style="cursor: pointer;" draggable="false" oncontextmenu="return false;">&nbsp;&nbsp; THEATER</a>
</div>

TO:

<div id="links">
<a onClick="refreshStream()" onmouseover="color:red;" style="cursor: pointer;" draggable="false" oncontextmenu="return false;">&nbsp;&nbsp; REFRESH</a>
<a onClick="normalsize()" onmouseover="color:red;" style="cursor: pointer;" draggable="false" oncontextmenu="return false;">&nbsp;&nbsp; NORMAL</a>";
</div>

I tried this but it didn't work hopefully someone can help thank you.

<script>
document.getElementById("links").innerHTML = "<a onClick="refreshStream()" onmouseover="color:red;" style="cursor: pointer;" draggable="false" oncontextmenu="return false;">&nbsp;&nbsp; REFRESH</a><a onClick="normalsize()" onmouseover="color:red;" style="cursor: pointer;" draggable="false" oncontextmenu="return false;">&nbsp;&nbsp; NORMAL</a>";
</script>

Where is refreshStream and TheaterMode

Tushar
– Tushar

2015-10-13 03:38:56 +00:00
Commented Oct 13, 2015 at 3:38 — Tushar
– Tushar, Commented Oct 13, 2015 at 3:38

dinjas · Accepted Answer · 2015-10-13 06:20:28Z

1

I simplified your example a bit. Basically you'll either need to wrap the html you're assigning in .innerHTML = ... with single quotes, or use \ to escape the quotes.

Simplified example:

// escape quotes with backslash
function theaterMode() {
    document.getElementById("links").innerHTML = "<a onclick=\"refreshStream()\" style=\"cursor: pointer;\">&nbsp;&nbsp; REFRESH</a><a onclick=\"normalSize()\" style=\"cursor: pointer;\">&nbsp;&nbsp; NORMAL</a>";
}

// or wrap HTML with single quotes
function normalSize() {
    document.getElementById("links").innerHTML = '<a onclick="refreshStream()" style="cursor: pointer;">&nbsp;&nbsp; REFRESH</a><a onclick="theaterMode()" style="cursor: pointer;">&nbsp;&nbsp; THEATER</a>';
}

function refreshStream() {
    document.getElementById("links").innerHTML = "<a onclick=\"refreshStream()\" style=\"cursor: pointer;\">&nbsp;&nbsp; REFRESH</a><a onclick=\"normalSize()\"  style=\"cursor: pointer;\">&nbsp;&nbsp; NORMAL</a>";
}

<div id="links">
    <a onclick="refreshStream()" style="cursor: pointer;">&nbsp;&nbsp; REFRESH</a>
    <a onclick="theaterMode()" style="cursor: pointer;">&nbsp;&nbsp; THEATER</a>
</div>

There are cleaner ways to do this, and if you're only changing what the second link does then there's really no reason to keep updating the first link.

Hope that's helpful.

edited Oct 13, 2015 at 6:20

answered Oct 13, 2015 at 4:12

dinjas

2,12519 silver badges25 bronze badges

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

2 Comments

user1719826 Over a year ago

I'd like to say my thanks and say I appreciate the time you took to explain things. everything became so clear to me once i learned about out single quotes, or the use \ to escape the quotes. (new to JS)

dinjas Over a year ago

No problem, glad you got some value from it!

Collectives™ on Stack Overflow

Javascript onclick replace entire inner html of div content

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