How to program a button to change stylesheets with javascript

Question

Please note that I am not using classes. I haven't found an answer for this SPECIFIC question.

Using javascript, how can I program a button to change the stylesheet each time the button is clicked?

I've tried different if, else if and else, but when I try them, it breaks the code (ie, it will change the color to blue if red, but not back again).
It works with 2 buttons, but getting it to change each time a single button is clicked seems to be eluding me. I got feed up and programmed a second button to change it back.

This works for 2 buttons:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>"Your Title Here"</title> <link id="um" rel="stylesheet" href="stylesheet1.css"> <style> </style> </head> <body> <p>booga</p> <button id="x" onclick="myFunction()">blue</button> <button id="x1" onclick="myFunction1()">red</button> <script> function myFunction() { if (document.getElementById("um").href = "stylesheet1.css"){ document.getElementById("um").href = "stylesheet2.css"} } function myFunction1() { if (document.getElementById("um").href = "stylesheet2.css"){ document.getElementById("um").href = "stylesheet1.css"} } </script> </body>

I would like to be able to get rid of the second button and second function and have it all with one button.

EDIT... I tried this, and it failed.

 function myFunction() { if (document.getElementById("um").href == "stylesheet1.css") {document.getElementById("um").href = "stylesheet2.css"}; else {document.getElementById("um").href = "stylesheet1.css"} }

How does a new programmer get any rep on this site when somebody always says "Oh, that's a duplicate! Down with you!" — Bugiroff
– Bugiroff, Commented Jul 5, 2016 at 21:42
@Bugiroff be patient, things takes time. you got any way my up vote — Maytham Fahmi
– Maytham Fahmi, Commented Jul 5, 2016 at 21:48

will · Accepted Answer · 2016-07-05 21:29:47Z

2

Make sure you're using == instead of = for your comparisons!

if (document.getElementById("um").href == "stylesheet1.css")

etc

answered Jul 5, 2016 at 21:29

will

2,0071 gold badge14 silver badges19 bronze badges

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

3 Comments

charlietfl Over a year ago

doesn't solve whole problem... href property will be absolute url, not same as attribute value

Bugiroff Over a year ago

so more along the lines of: function myFunction() { if (document.getElementById("um").href == "stylesheet1.css") {document.getElementById("um").href = "stylesheet2.css"}; else {document.getElementById("um").href = "stylesheet1.css"} }

will Over a year ago

To just check for the stylesheet name, you should be able to use if(document.getElementById("um").href.indexOf("stylesheet1") > -1)

Alfredo EM · Accepted Answer · 2016-07-05 21:48:52Z

Try this:

<button id="x" onclick="myFunction()">Change</button> <script> function myFunction() { var link = document.getElementById("um"); var segments = link.href.split('/'); var currentStyle = segments[segments.length - 1]; var style = (currentStyle == 'stylesheet1.css') ? 'stylesheet2' : 'stylesheet1'; document.getElementById("um").href = style + ".css" } </script>

In my case console.log(document.getElementById("um").href) returns file:///C:/Users/aespiritu/Desktop/aloha/stylesheet1.css

ZenDD · Accepted Answer · 2016-07-05 22:23:44Z

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>"Your Title Here"</title> <link id="um" rel="stylesheet" href="stylesheet1.css"> </head> <body> <p>booga</p> <button onclick="myFunction('um','stylesheet1.css', 'stylesheet2.css')">swap</button> <script> function myFunction(id,a,b) { var el = document.getElementById(id); var hrefStr; if(~el.href.indexOf(a)) { hrefStr = el.href.replace(a, b); el.href = hrefStr; } else { hrefStr = el.href.replace(b, a); el.href = hrefStr; } } </script> </body> </html>

Collectives™ on Stack Overflow

How to program a button to change stylesheets with javascript

3 Answers 3

3 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Related