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

body タグが正しくありません。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 に答える