Question

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

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

Answer 1

首先，您不需要#中的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;
}

Answer 2

您在开始时获得的值而不是实际值。

解决方案：将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>

Answer 3

如何将您的Javascript封装到<script>代码中？并从#删除fare。

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

3 个答案: