使用范围滑块更改div的高度

Question

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?

Answer 1

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>