Невозможно установить свойство «nodeValue» из null

Question

Я просматриваю книгу, и это кажется правильным, но следующий код продолжает давать мне ошибку: нельзя установить свойство nodeValue null. Код имеет смысл для меня, но я не понимаю, почему он не может очистить текстовое значение при нажатии кнопки очистки.

var clear = function(){ 

     $("miles").firstChild.nodeValue = ""; 
     $("gallons").firstChild.nodeValue = ""; 
     $("mpg").firstChild.nodeValue = ""; 
     } 

    window.onload = function() { 
     $("calculate").onclick = calculateMpg; 
     $("miles").focus(); 
     $("clear").onclick = clear; 
    } 

Html

<section> 
    <h1>Calculate Miles Per Gallon</h1> 
    <label for="miles">Miles Driven:</label> 
    <input type="text" id="miles"><br> 
    <label for="gallons">Gallons of Gas Used:</label> 
    <input type="text" id="gallons"><br> 
    <label for="mpg">Miles Per Gallon</label> 
    <input type="text" id="mpg" disabled><br> 
    <label>&nbsp;</label> 
    <input type="button" id="calculate" value="Calculate MPG"><br> 
    <input type="button" id="clear" value="clear"><br> 
</section> 

Answer 1

Входные элементы не имеют дочерних узлов, так firstChild дает нуль, еще более, если вы пытаетесь очистить значение из поля ввода используют свойство value.

var clear = function(){ 
    $("miles").value = ""; 
    $("gallons").value = ""; 
    $("mpg").value = ""; 
} 

Answer 2

Я думаю, что вы хотите, это, где вы используете .value свойство на полях ввода непосредственно:

var clear = function() { 
    $("miles").value = ""; 
    $("gallons").value = ""; 
    $("mpg").value = ""; 
} 

---

Вот объяснение того, что было продолжается. Теперь, когда мы видим вашу полную страницу и видим, что $ - document.getElementById(), проблема в том, что у вас есть некоторые из этих узлов, у которых нет firstChild.

Например, объект с id="miles" является входным тегом, и у него нет детей, поэтому .firstChild is null.

В этой строке:

$("miles").firstChild.nodeValue = ""; 

$("miles") получает вас объект DOM.

$("miles").firstChild возвращает null, потому что нет детей этого объекта DOM.

$("miles").firstChild.nodeValue = ""; ошибка, потому что $("miles").firstChild является null и null не имеют свойство .nodeValue.

Answer 3

Рассматривая код, опубликованный в комментариях, проблема в том, что $("miles") и другие элементы не имеют детей.

Похоже, что вы пытаетесь сделать что-то вроде этого:

var clear = function() { 
    $("miles").value = ""; 
    $("gallons").value = ""; 
    $("mpg").value = ""; 
}