我想使div高度随输入而变化，这样它就可以表示楼层。
我真的不知道如何使脚本变量表示实际值，因为如果我设置
文档. getElementById（"高度_表示_楼层"）. setAttribute（"样式"，"高度：高度_楼层"）;
要改成500px左右，它就能按预期工作。我能做什么？
function calculus_meters() {
height_floor = 0
height_input_code_meters = document.getElementById("height_input").value
height_floor = height_input_code_meters / 2.7
document.getElementById("height_representation_floors").setAttribute("style","height: height_floor ");
document.getElementById("output").textContent = height_input_code_meters + ' meters of height is approximately ' + height_floor.toFixed(0) + ' floors of a regular living building'
}
function calculus_feet() {
height_floor = 0
height_input_code_feet = document.getElementById("height_input").value
height_floor = height_input_code_feet / 8.86
document.getElementById("output").textContent = height_input_code_feet + ' feet of height is approximately ' + height_floor.toFixed(0) + ' floors of a regular living building'
}body {
margin: 0;
background: #595959;
height: 100%;
overflow-x: hidden;
}
#output {
position: absolute;
font: small-caps bold 24px/1 sans-serif;
background: white;
border: solid 2px black;
}
#button_1 {
position: absolute;
top: 3vh;
left: 62vw;
}
#button_2 {
position: absolute;
top: 3vh;
left: 69.7vw;
}
#height_representation_floors {
position: absolute;
top: 20vh;
height: 1100px;
width: 500px;
background-image: url(images/height_representation.png);
}
#height_representation_stickman {
position: absolute;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="house_2">
<div id="output" style="height: 5vh; width: 60vw; margin: 2vw; ">
</div>
<h1 style="position: absolute; left: 2vw; top: 8vh; text-align: left; font: small-caps bold 24px/1 sans-serif;"> Input wanted height: </h1>
<input type="number" step="any" id="height_input" style="position: absolute; margin: 2vw; top: 8vh; text-align: left; width: 60vw; height: 5vh; font-size: 2vw; border: solid 2px black;">
<div id="button_1">
<button type="button" onClick="calculus_meters()" style="width: 14.6vh; height: 14.6vh; border: solid 2px black; font-size: 1.5vw">Convert (in meters)</button>
</div>
<div id="button_2">
<button type="button" onClick="calculus_feet()" style="width: 14.6vh; height: 14.6vh; border: solid 2px black; font-size: 1.5vw">Convert (in feet)</button>
</div>
<div id="height_representation_floors">
</div>
</div>
</body>
</html>
2条答案
按热度按时间ny6fqffe1#
应该使用模板文本将变量连接到字符串中：
这将正确地将变量
height_floor的值插入到字符串中，这样div的高度将根据输入值而改变。pdsfdshx2#
代码的问题在于，您将“height”样式属性设置为字符串“height_floor”，而不是变量height_floor的值。要将div的高度设置为变量height_floor的值，应将代码行更改为：
这会将div的“style”属性设置为一个字符串，该字符串包含height_floor变量的值，后跟“px”以指定该值以像素为单位。