我在HTML和JavaScript中创建了一个简单的时间和半计算器,但出于某种原因,当我单击 Calculate 按钮时,P元素不会显示结果。
这是我的代码:
http://codepen.io/chrissylvester10/pen/wJxder
html>
<head>
</head>
<body>
<h1>Time and Half Calculator</h1>
<input id="fare" size="7" maxlength="7" name="fare" style="width:75px" value="0" />
<input type="button" value="Calculate" onclick="calculator()">
<p id="result"></p>
</body>
</html>
var fare = document.getElementById("#fare").value;
function calculator() {
var result = fare / 2 + fare;
document.getElementById("result").innerHTML = result;
}
请分叉,因为我需要看到变化。
答案 0 :(得分:2)
首先,您不需要#
中的var fare = document.getElementById("#fare").value;
。
应为var fare = document.getElementById("fare").value;
该行代码也应该在函数内部,因此每次更改时它都会读取新值,否则它将返回0。
最后,您要解析数字,使其不会被误读为字符串。
function calculator() {
var fare = parseInt(document.getElementById("fare").value);
var result = fare / 2 + fare;
document.getElementById("result").innerHTML = result;
}
编辑:
更简单的方法是
function calculator() {
document.getElementById("result").innerHTML = document.getElementById("fare").value*1.5;
}
答案 1 :(得分:0)
您在开始时获得的值而不是实际值。
解决方案:将fare
声明移到函数内部。
小变化:仅获取fare
作为ID。
function calculator() {
var fare = +document.getElementById("fare").value,
result = fare / 2 + fare;
document.getElementById("result").innerHTML = result;
}
<h1>Time and Half Calculator</h1>
<input id="fare" size="7" maxlength="7" name="fare" style="width:75px" value="0" />
<input type="button" value="Calculate" onclick="calculator()">
<p id="result"></p>
答案 2 :(得分:0)
如何将您的Javascript封装到<script>
代码中?
并从#
删除fare
。