无法将属性'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

我认为你想要的是直接在输入字段上使用.value属性:

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

---

下面是对正在发生的事情的解释。现在我们可以看到你的整个页面，看到$是document.getElementById()，问题是你是那些节点中的一些没有firstChild。

例如，具有id="miles"的对象是一个输入标记，它没有子标记，因此.firstChild是null。

这一行:

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

$("miles")为您提供DOM对象。

$("miles").firstChild返回null，因为该DOM对象没有子对象。

$("miles").firstChild.nodeValue = "";是一个错误，因为$("miles").firstChild是null和null没有属性.nodeValue

Answer 2

输入元素没有子节点所以firstChild给你null，进一步，如果你试图清除输入字段的值使用value属性。

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

Answer 3

看看你在评论中发布的代码，问题是$("miles")和其他元素没有任何孩子。

你好像在做这样的事情:

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