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

0

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>

answered Jul 5, 2016 at 21:48

Alfredo EM

2,0791 gold badge16 silver badges17 bronze badges

1 Comment

Alfredo EM Over a year ago

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

0

<!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>

answered Jul 5, 2016 at 22:23

ZenDD

9561 gold badge8 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to program a button to change stylesheets with javascript

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related