CSS theme select with JavaScript

Question

I am running a local-only site, not on a webserver.

I have a couple CSS styles that are user-selectable. Using this code works perfectly if it's directly on the page.

<div class="themeselect">
<table><tr>
<td><a href="#" onclick="localStorage.setItem('style','screen');location.reload()"><i class="far fa-sun"></i></a></td>
<td><a href="#" onclick="localStorage.setItem('style','highcontrast');location.reload()"><i class="far fa-moon"></i></a></td>
</tr></table>
</div>

I want to inject that HTML with a <script src="js/themeselect.js"></script> statement onto the page with an external JS file. I have tried this, but clicking the links doesn't do anything. I thought it might have something to do with the single and/or double quotes, but I've tried seemingly every combination of them, and I can't figure it out.

document.write("<div class='themeselect'>");
document.write("<table><tr>");
document.write("<td><a href='#' onclick='localStorage.setItem('style','screen');location.reload()'><i class='far fa-sun'></i></a></td>");
document.write("<td><a href='#' onclick='localStorage.setItem('style','highcontrast');location.reload()'><i class='far fa-moon'></i></a></td>");
document.write("</tr></table>");
document.write("</div>");

What do you mean by "inject that HTML onto the page with an external JS file"? From a browser extension or bookmarklet? Or something else? — Ben Hull
– Ben Hull, Commented Oct 16, 2019 at 13:54
@BenHull Sorry. I have edited my question to explain what I meant by that. — Robby
– Robby, Commented Oct 16, 2019 at 13:57
You've multiple quoting issues. Please take a look at the Dev Console. You can fix these by escaping the inner quotes with the backslash. — Teemu
– Teemu, Commented Oct 16, 2019 at 13:59
document.write() will repeatedly write over all of the content of the document, you can't use successive calls like that. You could use document.body.innerHTML = ... and pass in all of the HTML as a string. — skyline3000
– skyline3000, Commented Oct 16, 2019 at 14:01
@Teemu-callmewhateveryouwant The only errors I'm getting are CORS policy errors. — Robby
– Robby, Commented Oct 16, 2019 at 14:02

vipul patel · Accepted Answer · 2019-10-16 14:28:37Z

1

Escape it !!!

Check how i wrote 3rd and 4th line:

document.write("<div class='themeselect'>");
document.write("<table><tr>");
document.write("<td><a href='#' onclick=\"localStorage.setItem('style','screen');location.reload()\"><i class='far fa-sun'></i></a></td>");
document.write("<td><a href='#' onclick=\"localStorage.setItem('style','highcontrast');location.reload()\"><i class='far fa-moon'></i></a></td>");
document.write("</tr></table>");
document.write("</div>");

answered Oct 16, 2019 at 14:28

vipul patel

7504 silver badges10 bronze badges

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

Comments

Khôi Trần Quang · Accepted Answer · 2019-10-16 14:04:32Z

0

if you want to inner text between body tag or container element:

document.body.innerHTML = "<div class='themeselect'><table><tr><td><a href='#' onclick='localStorage.setItem('style','screen');location.reload()'><i class='far fa-sun'></i></a></td><td><a href='#' onclick='localStorage.setItem('style','highcontrast');location.reload()'><i class='far fa-moon'></i></a></td></tr></table></div>"

replace " to ' ,it work xD

answered Oct 16, 2019 at 14:04

Khôi Trần Quang

32 bronze badges

Collectives™ on Stack Overflow

CSS theme select with JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related