0

请原谅协议和/或格式方面的任何潜在失误。我是新来的。单击我的“提交”按钮不会调用函数 cost()。我究竟做错了什么？

<html>
<head>

<script type="text/javascript">
function cost() {
mpg = document.getElementById("mpg");
distance = document.getElementById("distance");
gasPrice = document.getElementById("gasPrice");
alert("<p>" + Math.round((distance / mpg) * gasPrice) + "</p>");
}
</script>

<h1>Trip Cost Calculator</h1>
</head>


<p> Enter mpg (miles): </p>
<input type="text" id="mpg">
</input>
</body>

<body>
<p> Enter distance (miles): </p>
<input type="text" id="distance">
</input>
</body>

<body>
<p> Enter gas price (dollars): </p>
<input type="text" id="gasPrice">
</input>
</body>

<body>
</br>
<input type="button" id="submit" value="Submit" onclick="cost()"/>
</body>
4

4 回答 4

1

您正在操作对象。使用这样的 value 属性检索值。

mpg = document.getElementById("mpg").value;
distance = document.getElementById("distance").value;
gasPrice = document.getElementById("gasPrice").value;
于 2012-04-18T07:08:57.573 回答
1

您需要这些元素的价值，而不是它本身的元素：

<script type="text/javascript">
function cost() {
mpg = document.getElementById("mpg").value;
distance = document.getElementById("distance").value;
gasPrice = document.getElementById("gasPrice").value;
alert(Math.round((distance / mpg) * gasPrice));
}
</script>

而且您还需要删除所有这些额外的<body>标签。

于 2012-04-18T07:09:35.060 回答
0

您的身体标签不正确。您还需要关闭html标签。此外，使用该.value属性访问input字段。

<html>
<head>

<script type="text/javascript">
 function cost() {
  mpg = document.getElementById("mpg").value;
  distance = document.getElementById("distance").value;
  gasPrice = document.getElementById("gasPrice").value;
  alert("<p>" + Math.round((distance / mpg) * gasPrice) + "</p>");
 }
</script>

<h1>Trip Cost Calculator</h1>
</head>


<body>

<p> Enter mpg (miles): </p>
<input type="text" id="mpg">
</input>
<p> Enter distance (miles): </p>
<input type="text" id="distance">
</input>
<p> Enter gas price (dollars): </p>
<input type="text" id="gasPrice">
</input>
</br>
<input type="button" id="submit" value="Submit" onclick="cost()"/>
</body>
</html>
于 2012-04-18T07:08:58.123 回答
0

这里的各种级别都会出错，首先要确保您拥有有效的 html。使用 DOM 节点时，始终最好确保您的浏览器可以创建有效的 dom 树，并且最适合使用有效的 html。检查http://validator.w3.org

其次，在您的cost()函数中，您不是获取输入字段的值，而是获取字段本身。当然，这会导致一些奇怪的行为，这可能解释你认为 cost() 函数没有被执行。可能是但会引发您没有注意到的错误（检查浏览器的调试/错误控制台）

我已经修复了您的示例，检查它，从中学习并阅读网络标准 :)

http://jsfiddle.net/vyfqC/3/

<!DOCTYPE html>
<html>
<head>

    <script type="text/javascript">
    function cost() {
        mpg = document.getElementById("mpg").value;
        distance = document.getElementById("distance").value;
        gasPrice = document.getElementById("gasPrice").value;
        alert("<p>" + Math.round((distance / mpg) * gasPrice) + "</p>");
    }
    </script>

    <title>Trip cost calculator</title>

</head>
<body>

    <h1>Trip Cost Calculator</h1>

    <p> Enter mpg (miles): </p>
    <input type="text" id="mpg" />

    <p> Enter distance (miles): </p>
    <input type="text" id="distance" />

    <p> Enter gas price (dollars): </p>
    <input type="text" id="gasPrice" />

    <input type="button" id="submit" value="Submit" onclick="cost()"/>

</body>
​
于 2012-04-18T07:15:21.407 回答