this is my first time using StackOverflow, so I still don't know how to use the code snippets properly.
I am still a beginner into programming and chose to start with the front-end side, i've done an orange background with "this is the red heading" written in red, it worked.
however, I'm trying to make a button that when it's clicked, only the background color changes from orange to yellow, but the button doesn't do anything at all.
here's the code("estilo" is the name of the CSS file and "responsividade" is the name of the JS file):
function changeColor() {
document.getElementById("redhead").style.backgroundColor = "yellowbg";
}#redhead {
background-color: orange;
color: red;
padding: 40px;
text-align: center;
}
#yellowbg {
background-color: yellow;
padding: 40px;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<body>
<link rel="stylesheet" href="estilo.css">
<script src="responsividade.js"></script>
<h1 id="redhead">this is the red heading</h1>
<button type="button" onclick="changeColor()">Click Here</button>
</body>
</head>
</html>Here: document.getElementById("redhead").style.backgroundColor = "yellow"; you are trying to assign a css class name to the backgroun color property.
function changeColor() {
document.getElementById("redhead").style.backgroundColor = "yellow";
}#redhead {
background-color: orange;
color: red;
padding: 40px;
text-align: center;
}
#yellowbg {
background-color: yellow;
padding: 40px;
text-align: center;
}<!DOCTYPE html>
<html>
<head> </head>
<body>
<link rel="stylesheet" href="estilo.css">
<script src="responsividade.js"></script>
<h1 id="redhead">this is the red heading</h1>
<button type="button" onclick="changeColor()">Click Here</button>
</body>
</html>head tag.yellowbg.function changeColor() {
document.getElementById("redhead").style.backgroundColor = "yellow";
}#redhead {
background-color: orange;
color: red;
padding: 40px;
text-align: center;
}
#yellowbg {
background-color: yellow;
padding: 40px;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<link rel="stylesheet" href="estilo.css">
<script src="responsividade.js"></script>
<h1 id="redhead">this is the red heading</h1>
<button type="button" onclick="changeColor()">Click Here</button>
</body>
</html>#yellowbg ruleset all properties are there in #readhead ruleset except background-color so in js, you can just update background color only.
if you want to change color try document.getElementById("redhead").style.backgroundColor = "yellow";
or if you want to set another id try
document.getElementById("redhead").setAttribute('id', 'yellowbg');