Changing Style Sheet javascript

Question

I got this HTML code:

<head>
    <script type="application/javascript" src="javascript.js">
    <link id="pagestyle" href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <button id="stylesheet1" > Default Style Sheet </button>
    <button id="stylesheet2" > Dark Style Sheet </button>
</body>

And in javascript.js I got this:

function swapStyleSheet(sheet) {
    document.getElementById("pagestyle").setAttribute("href", sheet);  
}

function initate() {
    var style1 = document.getElementById("stylesheet1");
    var style2 = document.getElementById("stylesheet2");

    style1.onclick = swapStyleSheet("default".css);
    style2.onclick = swapStyleSheet("dark".css);
}

window.onload = initate;

I want to the style sheets to change while pressing this buttons. I can't figure out why it is not working.

Somewhat similar [post][1], may be helpful to answer your problem [1]: stackoverflow.com/questions/13043147/… — CuriousMind
– CuriousMind, Commented Jan 12, 2013 at 11:58

Emil Ivanov · Accepted Answer · 2013-01-12 11:46:02Z

18

One guess would be the missing .css property, another would be the fact that onclick is not a function, but a result from invoking one:

Make all of .css a string and assign functions to onclick:

style1.onclick = function () { swapStyleSheet("default.css") };
style2.onclick = function () { swapStyleSheet("dark.css"); };

answered Jan 12, 2013 at 11:46

Emil Ivanov

37.8k12 gold badges78 silver badges92 bronze badges

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

Comments

Libert KHE · Accepted Answer · 2013-01-12 11:52:11Z

3

Transform "default".css into "default.css". Do the same for dark.css.

Then onclick takes a function as a value.

style1.onclick = function () { swapStyleSheet("default.css") };
style2.onclick = function () { swapStyleSheet("dark.css") };

answered Jan 12, 2013 at 11:52

Libert KHE

5405 silver badges22 bronze badges

Comments

The Creator · Accepted Answer · 2022-02-02 23:31:51Z

0

 $('button').click(function() {
   let mainSheet = $('#pageStyle').attr('href');
   if(mainSheet == "default.css")
      $('#pageStyle').attr('href','dark.css');
   else
      $('#pageStyle').attr('href','default.css');
   });

answered Feb 2, 2022 at 23:31

The Creator

1

Comments

Dmitry · Accepted Answer · 2018-07-07 16:46:47Z

-1

Hello it Won't work until you add onclick="" property in html So the final version will look like this: html

<head>
    <script type="application/javascript" src="javascript.js">
    <link id="pagestyle" href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <button id="stylesheet1" onclick="initate();"> Default Style Sheet </button>
    <button id="stylesheet2" onclick="onclick="initate();"> Dark Style Sheet </button>
</body>

Javascript file

function swapStyleSheet(sheet) {
    document.getElementById("pagestyle").setAttribute("href", sheet);  
}

function initate() {
    var style1 = document.getElementById("stylesheet1");
    var style2 = document.getElementById("stylesheet2");

    style1.onclick = swapStyleSheet("default.css");
    style2.onclick = swapStyleSheet("dark.css");
}

answered Jul 7, 2018 at 16:46

Dmitry

1771 silver badge6 bronze badges

1 Comment

KTibow Over a year ago

Can you check your answer? I think you put an extra onclick in there.

Collectives™ on Stack Overflow

Changing Style Sheet javascript

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related