Backgorund-color onclick change button
I have a problem with a simple script. I am trying to make a button change its background color when you click on it. I have searched here and searched for it. According to what I have found there is nothing wrong with my script. Can you help me solve this problem?
This is my CSS stylesheet:
body {
height: 100% 100vh;
background: linear-gradient(90deg, #122221 50%, #116699 50%);
}
#btn {
background-color: white;
width: 200px;
height: 100px;
}
and this is my html:
<!DOCTYPE html>
<meta charset="UTF-8">
<html lang="en-US">
<html>
<head>
<link rel="stylesheet" href="learning.css">
<script>
function foo(){
var x = document.getElementById("btn");
if (x.style.background-color == "white"){
x.style.background-color = "green";
}
else {
x.style.background-color = "white";
}
}
</script>
</head>
<body>
<button id = "btn" onclick = "foo()"> click me </buttonM>
</body>
</html>
source to share
background-color
Should be backgroundColor
:
function foo(){
var x = document.getElementById("btn");
if (x.style.backgroundColor == "white")
{
x.style.backgroundColor = "green";
}
else {
x.style.backgroundColor = "white";
}
}
NOTE. style.backgroundColor
will return an empty string for the first click, so it is best used getComputedStyle
to return the style attached to the element from CSS.
Hope it helps.
Snippet using getComputedStyle
(works from first click):
function foo(){
var x = document.getElementById("btn");
var bg_color = window.getComputedStyle(x,null).getPropertyValue("background-color");
if (bg_color == "rgb(255, 255, 255)")
{
x.style.backgroundColor = "green";
}
else {
x.style.backgroundColor = "white";
}
}
body {
height: 100% 100vh;
background: linear-gradient(90deg, #122221 50%, #116699 50%);
}
#btn {
background-color: white;
width: 200px;
height: 100px;
}
<button id="btn" onclick = "foo()"> click me </button>
source to share
The problem is x.style.background-color
. Instead, you should usex.style.backgroundColor
function foo(){
var x = document.getElementById("btn");
if (x.style.backgroundColor == "white"){
x.style.backgroundColor = "green";
}
else {
x.style.backgroundColor = "white";
}
}
#btn {
background-color: white;
width: 200px;
height: 100px;
}
<button id = "btn" onclick = "foo()"> click me </buttonM>
source to share
was wrong its style.backgroundColor
not with style.background-color
. and just use with one line if condition. Just like below snippet
function foo() {
var x = document.getElementById("btn");
x.style.backgroundColor = x.style.backgroundColor == "white" ? "green" : "white";
}
body {
height: 100% 100vh;
background: linear-gradient(90deg, #122221 50%, #116699 50%);
}
#btn {
background-color: white;
width: 200px;
height: 100px;
}
<body>
<button id="btn" onclick="foo()"> click me </buttonM>
</body>
source to share
You have an error in your javascript. You can use a background color, but you have to quote it and put it in brackets like this:
<!DOCTYPE html>
<meta charset="UTF-8">
<html lang="en-US">
<html>
<head>
<link rel="stylesheet" href="learning.css">
<script>
function foo(){
var x = document.getElementById("btn");
if (x.style['background-color'] == "white"){
x.style['background-color'] = "green";
}
else {
x.style['background-color'] = "white";
}
}
</script>
</head>
<body>
<button id = "btn" onclick = "foo()"> click me </buttonM>
</body>
</html>
source to share