Menu
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.
718
JavaScript can change Css styles such as color, font size etc. of elements using some methods such as getElementById(), getElementByClassName() etc. In the following example font style and font size of the elements have changed using getElementById() method.
Use rel="stylesheet" to link to the default style, and rel="alternate stylesheet" to link to alternative style sheets. This tells the browser which style sheet title should be selected by default, and makes that default selection apply in browsers that do not support alternate style sheets.
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"); };
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") };
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
