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

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 无法访问第一个 child 因为 <span id="message"></span> 这里没有任何第一个 child.

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

上面的语句returns null.You可以在浏览器控制台看到。

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

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

Why isn't my JS code displaying the message to the HTML page?

javascript

html

loops

dom