Im trying to make a function where I change the background color to the color that is input. It seems like the function works but it only changes to yellow. It leads me to believe that theres something wrong with the if else statements but I cant figure it out.
var colore = document.getElementById("colors");
function changecolor() {
if (colore = "yellow"){
document.body.style.backgroundColor = "yellow";
}else if (colore = "blue"){
document.body.style.backgroundColor = "blue";
}else if (colore = "green"){
document.body.style.backgroundColor = "green";
}else if (colore = "black"){
document.body.style.backgroundColor = "black";
}else {document.getElementById("error").innerHTML =
"Enter a Valid Color";}
}
Your code has a few errors which I have fixed and the details are below
input value, you need to access .value like document.getElementById("colors").value=== in your condition to compare. Single = is an assignment operator, and your code was just assigning yellow each time. Also read Which equals operator (== vs ===) should be used in JavaScript comparisons?Working Code below
function changecolor() {
var colore = document.getElementById("colors").value;
document.getElementById("error").innerHTML=""; // remove existing error
if (colore === "yellow") {
document.body.style.backgroundColor = "yellow";
} else if (colore === "blue") {
document.body.style.backgroundColor = "blue";
} else if (colore === "green") {
document.body.style.backgroundColor = "green";
} else if (colore === "black") {
document.body.style.backgroundColor = "black";
} else {
document.getElementById("error").innerHTML =
"Enter a Valid Color";
}
}<input id="colors" type="text" />
<button onClick="changecolor()">Change</button>
<p id="error"></p>