无法获得简单的onclick脚本。可能会弄乱变量

时间:2017-10-28 21:27:14

标签: javascript html

我正在尝试使用三个输入框制作一个非常简单的计算器,并使用一个按钮将结果输入另一个文本框。我尝试了不同的方法,似乎没有一种方法可行。我的猜测是我完全弄乱了变量。

<div class="input-group col-xs-2">
    <span class="input-group-addon" id="basic-addon1">Velocity (m/s)</span>
    <input type="text" class="form-control" aria-describedby="basic-addon1" id="vel">
</div>

<div class="input-group col-xs-2">
    <span class="input-group-addon" id="basic-addon1">Diameter (m)</span>
    <input type="text" class="form-control" aria-describedby="basic-addon1" id="dia">
</div>

<div class="input-group col-xs-2">
    <span class="input-group-addon" id="basic-addon1">Kinematic Viscosity (m&#178;/s)</span>
    <input type="text" class="form-control" aria-describedby="basic-addon1" id="kinVis">
</div>

<button type="button" class="btn" onclick="reynoldsNumber(x, y, z)">Calculate</button>

<div class="input-group col-xs-2">
    <span class="input-group-addon" id="basic-addon1">Reynolds Number</span>
    <input type="text" class="form-control" aria-describedby="basic-addon1" id="reynolds" readonly>
</div>

<script>
    function reynoldsNumber(x, y, z) {
        var x = document.getElementById("vel").innerHTML;
        var y = document.getElementById("dia").innerHTML;
        var z = document.getElementById("kinVis").innerHTML;
        return (x * y) / z;
    }
    document.getElementById("reynolds").innerHTML = reynoldsNumber(x, y, z);
</script>

谢谢。

3 个答案:

答案 0 :(得分:1)

我可以看到一些错误。我认为你做一两个javascript教程可能是有用的,因为这些是你真正应该理解的关键概念。

  1. 您正在使用参数调用函数,然后在其顶部进行分配。
  2. 没有必要这样做
  3. document.getElementById完全按照说法行事。它获得一个Id的元素。你没有Id“vel”(或其他)的元素 - 你只有名称为“vel”的元素
  4. 如果使用参数调用函数,则参数需要存在于当前范围

答案 1 :(得分:1)

这是一个工作脚本,你只需要调用onclick =“reynoldsNumber()”。您无需通过函数

传递任何值

此外,您无法输出到innerHTML,但可以输出到该值。此外,它不是您想要获得的innerHTML,而是输入的值。这些错误在下面修复。

 <script>
    function reynoldsNumber() {
      var x = document.getElementById("vel").value;
      var y = document.getElementById("dia").value;
      var z = document.getElementById("kinVis").value;

      document.getElementById("reynolds").value = (x * y) / z;

}

</script>

答案 2 :(得分:0)

调用方法时,需要向x,y和z提供实际值,或者需要使用var x = [your number here]

在全局范围内定义它们

HTML代码中的onClick侦听器存在同样的问题。提供实际值而不是未定义的x,y,z