0

I am trying to change the height of a div with a range slider.

var heightR = document.getElementById("heightR").value;
var details = document.getElementById("details");

function range() {
 heightD.value=value;
}
function changeH() {
 if (heightR = 1) {
  details.style.height = "100px";
 } else if (heightR = 2) {
  details.style.height = "200px";
 } else if (heightR = 3) {
  details.style.height = "300px";
 } else {
  console.log("Less than 1, higher than 3 or NaN");
 }
}
<div id="generator">
<input id="heightR" type="range" min="1" max="3" value="1" onchange="heightD.value=value;changeH();"></input>
<output id="heightD">1</output>
 
 <div id="details" style="border: solid 1px black"><p>Content</p></div>
 <br />
</div>

As you see, whenever the range is moved the height of the div is set to 100px, as if the value of the range slider was always 1... I checked in the console, and it is indeed! I tried changing the value attribute of heightR to 2, and it did the same thing: the value always equaled 2?!

Any help?

Thurinum
  • 148
  • 3
  • 13
  • 1
    You're **assigning** `heightR` to `1` / `2` / `3` rather than **comparing against it**. Note that you only have one equals sign, and need two or three. See [**this question**](https://stackoverflow.com/questions/17974377/how-does-the-single-equal-sign-work-in-the-if-statement-in-javascript) for how assignment works in an `if` conditional. – Obsidian Age May 17 '18 at 00:24
  • rather than using an if/else block, set the height of the div with `details.style.height = 100 * heightR + "px"` (or the template literal version of the same statement). – Jason Warta May 17 '18 at 00:35

1 Answers1

4

You need to put "var heightR = document.getElementById("heightR").value;" inside the changeH function and also change if else function from "=" to "==" for comparing the value of heightR with "1/2/3". Hope this help ^^

var heightR = document.getElementById("heightR").value;
var details = document.getElementById("details");

function range() {
 heightD.value=value;
}
function changeH() {
var heightR = document.getElementById("heightR").value;
 if (heightR == 1) {
  details.style.height = "100px";
 } else if (heightR == 2) {
  details.style.height = "200px";
 } else if (heightR == 3) {
  details.style.height = "300px";
 } else {
  console.log("Less than 1, higher than 3 or NaN");
 }
}
<div id="generator">
<input id="heightR" type="range" min="1" max="3" value="1" onchange="heightD.value=value;changeH();"></input>
<output id="heightD">1</output>
 
 <div id="details" style="border: solid 1px black"><p>Content</p></div>
 <br />
</div>
beginnerprogrammer
  • 498
  • 4
  • 14