Question

感谢您查看我的问题！

我是一个Javascript新手，我正在学习从HTML表单中检索用户输入值，我无法弄清楚为什么我的消息没有显示在页面上。当我在浏览器中运行代码时，错误控制台告诉我.js文件的第16行存在问题，其中.firstChild.nodeValue返回null。我在哪里可以解决继承问题并从表单中接收值？

顺便说一下，我有兴趣使用firstChild.nodeValue方法而不是.innerHTML方法。：）

以下是我的HTML文件中的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="X_3_1.js"></script>
    <title>Exercise 3-1 HTML</title>
</head>
<body>
    <h1>Exercise 3-1</h1>
    <form id="user_input" name="user_input" method="get">
        <p>
            <label for="first_name">Enter First Name:</label>
            <input type="text" id="first_name">
        </p>
        <p>
            <label for="children">Do you have children? :</label>
            <input type="text" id="children">
        </p>
        <p>
            <label for="age">If so, how old is your oldest child? :</label>
            <input type="text" id="age">
        </p>
        <p>
            <input type="button" value="Submit Information" onClick="processInfo()"><br>
        </p>
        <span id="message"></span>
        <label>&nbsp;</label>
    </form>

</body>
</html>

以下是我的Javascript文件中的代码：

function processInfo() {
    var firstName = document.getElementById("first_name").value;
    var children = document.getElementById("children").value.toUpperCase();
    var result = children.substring(0, 1);
    var age = parseInt(document.getElementById("age").value);

    var today = new Date();

    if (result === "Y" || children === "YES") {
        if (age <= 19) {
            document.getElementById("message").firstChild.nodeValue = "<p>You still have kids at home</p>";
        } else if (age > 19) {
            document.getElementById("message").firstChild.nodeValue = "<p>Hopefully they have moved out of the house</p>";
        }
    } else if (result === "N" || children === "NO") {
        document.getElementById("message").firstChild.nodeValue = "<p>It must be peaceful at home, " + firstName + " on this date of " + today.getMonth() + "/" + today.getDate() + "</p>";
    } else {
        document.getElementById("message").firstChild.nodeValue = "<p>Did you answer Yes or No?</p>";
    }
}

Answer 1

你很可能不得不使用：

document.getElementById("message").innerHTML = 'text';

因为您的消息元素没有任何孩子

Answer 2

您的document.getElementById("message").firstChild.nodeValue无法访问第一个孩子，因为<span id="message"></span>此处没有第一个孩子。

console.log(document.getElementById("message").firstChild )

上面的语句返回null。您可以在浏览器控制台中看到它。

使用document.getElementById('message').innerHTML="your text";代替

为什么我的JS代码没有向HTML页面显示消息？

2 个答案: