New course! Every coder should learn Generative AI!
Try a free lesson0
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?
6 Answers
+ 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
+ 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>
+ 9
Where's the Code?
post your code so we can check why does it not work.
+ 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!!
+ 1
thank you lord krishna
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;
}
Often have questions like this?
Learn more efficiently, for free:
Hot today
Bash
0 Votes
Why exception is not handled
1 Votes
Please help
0 Votes
Links of cmy codes
5 Votes
Tips for first app
1 Votes
Link
6 Votes
Ruby
2 Votes