2012-04-18 160 views
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> 
+2

一開始,你不應該有多個'body'標籤在HTML頁面中,所有的內容應該是在體內。 – sje397 2012-04-18 07:06:22

+1

首先你只需要''和一個''。事實上,你的頭後並沒有「身體」。 – steveoh 2012-04-18 07:07:03

+0

您沒有捕獲輸入字段的值,只是輸入字段本身。 使用輸入字段的值屬性來獲取值。 例如 document.getElementById(「gasPrice」).value; – 2012-04-18 07:28:17

回答

1

您正在操作對象,使用像這樣的值屬性來檢索值。

mpg = document.getElementById("mpg").value; 
distance = document.getElementById("distance").value; 
gasPrice = document.getElementById("gasPrice").value; 
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> 
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>標籤。

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> 
​ 
+0

謝謝你。這有很大幫助。 是的。這問題是超級尷尬。 :) – 2012-04-18 07:25:06