CODEWITHSUNDEEP
javascript
Joe Other
Joe Other

Reputation: 21

Changing the background of a button based on slider value

I'm trying to create a button that changes color based on the value of a slider. It should be yellow when the page loads, red if value = 1, blue if value = 2, green if value =3.

Right now no matter what the value, the button turns red. What am I missing?

html:

<input type="button" id="demo" style="background: yellow">
<input id="demorange" type="range" min="1" max="3" onchange="myFunction()">

js:

function myFunction() {
  var x = document.getElementById("demo");
  var y = document.getElementById("demorange");
  if (y= 1) { 
    x.style.background = "red";
  } else if (y= 2) { 
    x.style.background = "blue";
  } else if (y= 3) {
    x.style.background = "green";
  }
}

Upvotes: 0

Views: 81

Answers (4)

Gareth Jordan
Gareth Jordan

Reputation: 976

In your iff statements you are assigning the value not comparing change to:

 var x = document.getElementById("demo");
 var y = parseInt(document.getElementById("demorange").value);
 if (y === 1) { 
   x.style.background = "red";
 } else if (y === 2) { 
   x.style.background = "blue";
 } else if (y === 3) {
   x.style.background = "green";
 }

etc...

Upvotes: 0

אריאל מרקוביץ&#39;
אריאל מרקוביץ&#39;

Reputation: 1

you should use y.value to get the data inside the input button, and also you should use "==" in boolean statements, instead of "=", which is used in declarations.

like this:

  if (y.value == 1) { 
    x.style.background = "red";
  } else if (y.value == 2) { 
    x.style.background = "blue";
  } else if (y.value == 3) {
    x.style.background = "green";
  }
}

Upvotes: 0

guy mograbi
guy mograbi

Reputation: 28648

https://plnkr.co/edit/En8G8MkjDLBFMNbGNwC1?p=preview

function myFunction() {
  var x = document.getElementById("demo");
  var y = document.getElementById("demorange").value;
  if (y== 1) { 
    x.style.background = "red";
  } else if (y== 2) { 
    x.style.background = "blue";
  } else if (y== 3) {
    x.style.background = "green";
  }
}

Couple of things:

  • Boolean condition equals is ==. you had =
  • y is the element, while it should be the value of the element. so need to replace y=document.getElementById("demorange") to y=document.getElementById("demorange").value

So why did it turn to red at all?

In javascript, the expression y=1 will return the value 1.

And in a boolean expression, 1 is the same as true true

So the expression if (y=1){ .. } would be evaluated to true,

Upvotes: 1

Feathercrown
Feathercrown

Reputation: 2591

You are using = to compare the values rather than ==; this will always be true (causing it to always use the first if branch) and will also set your variable to the value you're testing for!

You also need to use y.value instead of just y so you get the value of the input, not the element itself.

Fixed code:

Html:

<input type="button" id="demo" style="background: yellow">
<input id="demorange" type="range" min="1" max="3" onchange="myFunction()">

JS:

function myFunction() {
  var x = document.getElementById("demo");
  var y = document.getElementById("demorange");
  if (y.value == 1) { 
    x.style.background = "red";
  } else if (y.value == 2) { 
    x.style.background = "blue";
  } else if (y.value == 3) {
    x.style.background = "green";
  }
}

Upvotes: 1

Related Questions