Question

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

＆＃13;

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");
	}
}

＆＃13;

<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>

＆＃13;

如您所见，无论何时移动范围，div的高度都设置为100px，就像范围滑块的值始终为1 ...我在控制台中检查过，确实是这样！我尝试将heightR的value属性更改为2，它也做了同样的事情：值总是等于2？！

任何帮助？

Answer 1

你需要把＆＃34; var heightR = document.getElementById（＆＃34; heightR＆＃34;）。value;＆＃34;在changeH函数内部，也改变if else函数来自＆＃34; =＆＃34;到＆＃34; ==＆＃34;用于比较heightR的值和＆＃34; 1/2/3和＃34;。希望这有帮助^^

＆＃13;

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");
	}
}

＆＃13;

<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>

＆＃13;

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

1 个答案: