JavaScript中的简单时间和半计算器

时间:2017-03-25 22:05:20

标签: javascript

我在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;
}

请分叉,因为我需要看到变化。

3 个答案:

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