javascript - 使用范围 slider 更改 div 的高度

Question

我正在尝试使用范围 slider 更改 div 的高度。

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>

如您所见，无论何时移动范围，div 的高度都会设置为 100px，就好像范围 slider 的值始终为 1...我检查了控制台，确实如此!我尝试将 heightR 的值属性更改为 2，它做了同样的事情:值总是等于 2？!

有什么帮助吗？

Answer 1

您需要输入“var heightR = document.getElementById("heightR").value;”在 changeH 函数中，还将 if else 函数从“=”更改为“==”，用于将 heightR 的值与“1/2/3”进行比较。希望这有帮助^^

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>