0

When I click on the button he make the change I want but the other function of the other tags do not work again in HTM Why that?

28th Dec 2017, 5:48 PM
Sa'ad Awad
6 odpowiedzi
+ 11
I don't understand what you mean? Post a code & give a simple explanation of your problem. You will get better help. Check below post for some tips to get useful answers. https://www.sololearn.com/discuss/333866/?ref=app
28th Dec 2017, 5:56 PM
Lord Krishna
Lord Krishna - avatar
+ 11
The code is complicated. You should know how to manipulate DOM & events check below article it will help in understanding it. https://zellwk.com/blog/js-in-dom/ The below code does what you want in a simple manner. <!DOCTYPE html> <html> <head> <title>styles</title> </head> <body> <style> /*default style */ body{ background-color:blue; } /* style class to add */ .gold { background-color:gold; } </style> <!--first button--> <input id="golden" class="maincolor" type="button" value="gold" class="button" style="background-color:#ffd700;"> <!--second button--> <input id="defaultStyle" class="maincolor" type="button" value="default" class="button" style="background-color:blue;"> <script> var body = document.querySelector("body") //function to class gold function addBackgroundGold(){ body.classList.add('gold') } //function to remove class gold function removeBackground(){ body.classList.remove('gold') } //click eventListener for golden button golden.addEventListener("click", addBackgroundGold) //click eventListener for defaultStyle button defaultStyle.addEventListener('click', removeBackground) </script> </body> </html>
29th Dec 2017, 4:45 PM
Lord Krishna
Lord Krishna - avatar
+ 9
Where's the Code? post your code so we can check why does it not work.
29th Dec 2017, 1:59 AM
Lord Krishna
Lord Krishna - avatar
+ 1
in fact there are two buttons I made an events on them fire when I click in any one of them which associate to function in JS so they can change the styles of the page , the second button to make the user be able to return to the default style but unfortunately it isn't work!!
28th Dec 2017, 6:18 PM
Sa'ad Awad
+ 1
thank you lord krishna
29th Dec 2017, 4:54 PM
Sa'ad Awad
0
<!DOCTYPE html> <html> <head> <title>styles</title> <link id="gold" href="G:\website\goldsheet.css"> <link id="blue" href="G:\website\bluesheet.css"> <script> function goldstyle(){ //var x = document.getElementById("gold").href; var y = document.getElementById("gold").rel; var z = document.getElementById("gold").type; document.getElementById("gold").rel="stylesheet"; document.getElementById("gold").type="text/css"; } function defaultstyle(){ //var x = document.getElementById("blue").href; var y = document.getElementById("blue").rel; var z = document.getElementById("blue").type; document.getElementById("blue").rel="stylesheet"; document.getElementById("blue").type="text/css"; } </script> </head> <body> <!--frist button--> <input onclick="goldstyle()" id="golden" class="maincolor" type="button" value="gold" class="button" style="background-color:#ffd700;"> <!--second button--> <input onclick="defaultstyle()" id="default" class="maincolor" type="button" value="default" class="button" style="background-color:blue;"> </body> </html> ''this is a code shows the button and functions with js and link external CSS for both first and second buttons Respectively" ==== CSS <!--goldsheet.css--> body { background-color:gold; } ==== <!--bluesheet> body{ background-color:blue; }
29th Dec 2017, 7:34 AM
Sa'ad Awad