提交按钮不调用函数
[英]Submit Button Not Calling Function
问题描述
Please forgive any potential lapses in protocol and/or formatting. 
请原谅协议和/或格式化中的任何潜在失误。 I'm new at this. 我是新来的。 Clicking on my "submit" button does not call the function cost(). 单击我的“提交”按钮不会调用函数cost（）。 What am I doing wrong? 我究竟做错了什么？
<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 个解决方案
解决方案1
1 2012-04-18 07:08:57
You are manipulating objects.Retrieve values using value property like this. 您正在操纵对象。使用这样的值属性来检索值。
mpg = document.getElementById("mpg").value;
distance = document.getElementById("distance").value;
gasPrice = document.getElementById("gasPrice").value;
解决方案2
1 2012-04-18 07:09:35
You need value of those elements, not the element it self: 你需要那些元素的价值，而不是它自己的元素：
<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>
And you also need to remove all those extra <body> tags. 而且您还需要删除所有额外的<body>标记。
解决方案3
0 2012-04-18 07:08:58
Your body tags are incorrect. 你的身体标签不正确。 You also need to close your html tag. 您还需要关闭html标记。 Moreover, use the .value property to access the input fields. 此外，使用.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>
解决方案4
0 2012-04-18 07:15:21
Things go wrong on all kinds of levels here, first and for all make sure you have valid html . 这里各种各样的事情都出错了，首先要确保你拥有有效的HTML 。 When working with DOM nodes it's always best to make sure your browser can create a valid dom tree and that works best with valid html. 使用DOM节点时，最好确保您的浏览器可以创建有效的dom树，并且最适合使用有效的html。 Check http://validator.w3.org 检查http://validator.w3.org
Second, in your cost() function you aren't fetching the values of the input fields but the fields themself. 其次，在cost()函数中， 您不是获取输入字段的值而是自己获取字段。 Ofcourse this results in some weird behaviour which might explain you thinking the cost() function isn't executed. 当然，这会导致一些奇怪的行为，这可能会解释你认为cost（）函数没有被执行。 It probably is but is throwing errors you don't notice (check the debug/error console of your browser) 它可能只是抛出你没注意到的错误（检查浏览器的调试/错误控制台）
I've fixed up your example, check it, learn from it and read up on webstandards :) 我已经修好了你的例子，检查它，从中学习并阅读webstandards :)
http://jsfiddle.net/vyfqC/3/ 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.