제출 단추가 작동하지 않음 기능

프로토콜 및/또는 형식의 잠재적 인 오류를 용서하십시오. 나는 이것에 관해 새로운 사람이다. 내 "제출"버튼을 클릭해도 function 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>

출처

2012-04-18 William M.

, 당신은 HTML 페이지에 여러'body' 태그가 안되며, 모든 컨텐츠는 몸에 있어야합니다. – sje397

먼저 ''과 ''중 하나만 있으면됩니다. 실제로 당신은 당신의 머리 뒤에 '몸'을 갖지 못합니다. – steveoh

입력 필드의 값은 캡처하지 않고 입력 필드 자체 만 캡처합니다. 입력 필드의 value 속성을 사용하여 값을 가져옵니다. 예 : document.getElementById ("gasPrice"). 값; –

개체를 조작하고 있습니다.이 값 속성을 사용하여 값을 검색하십시오.

mpg = document.getElementById("mpg").value; 
distance = document.getElementById("distance").value; 
gasPrice = document.getElementById("gasPrice").value;

출처

2012-04-18 07:08:57

본문 태그가 잘못되었습니다. 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-18 07:08:58

당신은 그 요소의 값이 아닌 요소 그 자체가 필요

<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-18 07:09:35

모든 종류의 수준에서 처음에는 모든 것이 잘못되었습니다. 은 올바른 HTML을 가지고 있는지 확인하십시오. DOM 노드로 작업 할 때 브라우저가 유효한 DOM 트리를 만들 수 있는지 확인하는 것이 가장 좋습니다. 올바른 DOM 트리에서 가장 잘 작동합니다. 당신이 값 입력 필드하지만 필드 스스로가의를 가져 오는되지 않습니다 당신의 cost() 기능에, http://validator.w3.org

두 번째를 확인합니다. Ofcourse는 cost() 함수가 실행되지 않는다는 것을 설명 할 수있는 이상한 행동을 유발합니다. 그것은 아마 그러나 당신이 알 (브라우저의 디버그/오류 콘솔 확인)

내가 당신의 예를 수정했습니다, 그것을 확인, 그것으로부터 배우고 webstandards에 읽어 :)
을하지 않는 오류를 던지고있다 처음에는
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-18 07:15:21 ChrisR

친절하게 감사드립니다. 그것은 많은 도움이됩니다. 예. 그 문제는 매우 당혹 스럽습니다. :) –

제출 단추가 작동하지 않음 기능

답변

관련 문제