JavaScript getElementByIdは常にnullを返します

私は単純な予算計算機を構築しようとしていますが、私が送信ボタンをクリックするたびに何も起こりません。コンソールで変数の値をチェックしようとすると、入力ボックスに値を入力しても、nullが表示されます。誰かが私が間違っていることを教えてもらえますか？ここで他の質問を見た後、私は自分の問題に関連する答えを見つけることができませんでした。JavaScript getElementByIdは常にnullを返します

<!DOCTYPE html> 
<html> 

<head> 
    <title>Budget Calculator</title> 
    <style> 
     input {display:block;} 
     #clear {float:left;} 
     #submit {float:left;} 
    </style> 
    <script type="text/javascript"> 
     var kms = document.getElementById("kmTravelled"); 
     var rent = document.getElementById("rentPerMonth"); 
     var carCost = document.getElementById("carPayment"); 
     var costPerTrip = (kms/12.75)*20; 
     var total = Math.round((costPerTrip + rent + carCost)*100)/100; 

     function calculate() 
     { 
      document.getElementById("calculator").innerHTML = total; 
     } 
    </script> 
</head> 
<body> 


    <form id="myForm")> 
     Km travelled per day: <input type="number" name="kmTravelled" /> 
     Rent per month: <input type="number" name="rentPerMonth" /> 
     Car payment per month: <input type="number" name="carPayment" /> 
    </form> 
    <button id="submit" type="button" onclick="calculate();"> 
     Submit 
    </button> 
    <button id="clear" type="clear"> 
     Clear 
    </button> 

    <p id = "calculator"> 
    </p> 

    <script> 
     calculate(); 
    </script> 

</body>

出典

2017-02-18 Reg Smith

ちょっとしたヒント： '

id属性を使用して、関数内の値を取得する部分と、valueプロパティを取得する部分を移動して、文字列値を数値にキャストして計算することをお勧めします。

function calculate() { 
 
    var kms = +document.getElementById("kmTravelled").value; 
 
    var rent = +document.getElementById("rentPerMonth").value; 
 
    var carCost = +document.getElementById("carPayment").value; 
 
    var costPerTrip = (kms/12.75) * 20; 
 
    var total = Math.round((costPerTrip + rent + carCost) * 100)/100; 
 

 
    document.getElementById("calculator").innerHTML = total; 
 
}

input { display: block; } 
 
#clear { float: left; } 
 
#submit { float: left; }

<form id="myForm"> 
 
    Km travelled per day: <input type="number" name="kmTravelled" id="kmTravelled"/> Rent per month: <input type="number" name="rentPerMonth" id="rentPerMonth" /> Car payment per month: <input type="number" name="carPayment" id="carPayment" /> 
 
</form> 
 
<button id="submit" type="button" onclick="calculate();">Submit</button> 
 
<button id="clear" type="clear">Clear</button> 
 
<p id="calculator"></p>

出典

2017-02-18 18:39:09

あなたはS 'のあなたinputでS' は何のidがありませんが、あなたのような名前セレクタ$('[name=""]')を使用することができますので、あなたの代わりにname年代を持っている：あなたの場合は

var kms = document.querySelector("[name='kmTravelled']").value; 
var rent = document.querySelector("[name='rentPerMonth']").value; 
var carCost = document.querySelector("[name='carPayment']").value;

idを実際に使いたいのですが、それらを追加するだけで、JSコードは次のようになります：

var kms = document.querySelector("#kmTravelled").value; 
var rent = document.querySelector("#rentPerMonth").value; 
var carCost = document.querySelector("#carPayment").value;

注：オブジェクト全体ではなく、valueという要素だけを取得する必要があります。

これが役に立ちます。

var kms = document.querySelector("[name='kmTravelled']").value; 
 
var rent = document.querySelector("[name='rentPerMonth']").value; 
 
var carCost = document.querySelector("[name='carPayment']").value; 
 
var costPerTrip = (kms/12.75)*20; 
 
var total = Math.round((costPerTrip + rent + carCost)*100)/100; 
 

 
function calculate() 
 
{ 
 
    document.getElementById("calculator").innerHTML = total; 
 
} 
 

 
calculate();

input { 
 
    display:block; 
 
} 
 

 
#clear { 
 
    float:left; 
 
} 
 

 
#submit { 
 
    float:left; 
 
}

<form id="myForm")> 
 
    Km travelled per day: <input type="number" name="kmTravelled" /> 
 
    Rent per month: <input type="number" name="rentPerMonth" /> 
 
    Car payment per month: <input type="number" name="carPayment" /> 
 
</form> 
 

 
<button id="submit" type="button" onclick="calculate();"> 
 
    Submit 
 
</button> 
 

 
<button id="clear" type="clear"> 
 
    Clear 
 
</button> 
 

 
<p id = "calculator"></p>

出典

2017-02-18 18:34:12

要素をキャッシュするスクリプトが実行されても、要素が存在しないため、これは依然として中断されます。 – Gerrit0

実際に助けられました。私はjsでこの基本的ではない、ちょうどidの代わりに名前を入れて簡単な間違いをした。 '-_-私のエラーを指摘してくれてありがとう！ –

更新をご確認ください。 @RegSmithは私たち全員に心配することはありません;） –

私はあなたがgetElementByIdを（ 'kmTravelled'）を試してみる必要があると思います。

出典

2017-02-18 18:37:56

まず、あなたは、HTMLタグに適切なIDを与える必要があります。 HTMLタグを確認し、の名前をidに変換してください。コードを参照すると、変数に値が割り当てられていないため、のJavaScriptコードを少し変更する必要があります。これらの問題を修正すると、コードが正しく実行されます。

出典

2017-02-18 19:08:30 mim

JavaScript getElementByIdは常にnullを返します

答えて

関連する問題