JavaScript getElementById всегда возвращает 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

Вы не имеют никаких id 'S в вас input-х, но у вас есть name «s вместо, чтобы вы могли использовать селектор имя $('[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-тег. проверьте свой HTML-тег, конвертируйте те имя в id. Теперь вам нужно слегка изменить свой код javascript, если вы посмотрите на свой код , вы не присвоили значение вашей переменной. исправить эти проблемы, и ваш код будет работать должным образом.

источник

2017-02-18 19:08:30 mim

JavaScript getElementById всегда возвращает null

ответ

Смежные вопросы