加载时使用 javascript 提示更新 innerHTML 的问题答案

【问题标题】：Issue with updating innerHMTL with javascript prompt on load加载时使用 javascript 提示更新 innerHTML 的问题
【发布时间】：2022-07-22 00:35:41
【问题描述】：

我正在尝试使用提示信息更新 id = "content" 的标签。由于某种原因，window.onload 函数不起作用。我试过移动周围没有成功。显然 div 是空的，但我不知道如何解决这个问题。谢谢！

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Exercise 3</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <p><strong>User Information:</strong></p>
        <div id=”content”>...</div>



        <script type="text/javascript">
            
            function promptFunc() {
                let text; 
                let name = prompt("What is your full name?", "Name");
                let age = prompt("How old are you?", "Age");
                if (name == null || age == null || name == "" || age ==""){
                  text = "User did not enter information";
                }else {
                    text = "Hi, my name is "+name+" and i'm "+age+" years old.";
                }
                document.getElementById("content").innerHTML = text;
            }

            window.onload=function(){
                promptFunc();
            }
            
        </script>
    </body>

</html>

【问题讨论】：

Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')",
您的 id ”content” 周围的引号类型错误，您可以看到它们是倾斜的。需要直<div id="content">...</div>
如果您不使用 IDE 进行编码。我建议你开始使用一个，这样你就不会得到错误的报价。 VSCode 是免费的，还有很多其他的。
@GeekyQuentin 小心你的编辑，你修复了这个错误。
这是一个错误，道歉

标签： javascript html

【解决方案1】：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Exercise 3</title>
    <meta charset="UTF-8">
</head>

<body>
    <p><strong>User Information:</strong></p>
    <div id="content">...</div>

    <script type="text/javascript">
        function promptFunc() {
            let text;
            let name = prompt("What is your full name?", "Name");
            let age = prompt("How old are you?", "Age");
            if (name == null || age == null || name == "" || age == "") {
                text = "User did not enter information";
            } else {
                text = "Hi, my name is " + name + " and i'm " + age + " years old.";
            }
            document.getElementById("content").innerHTML = text;
        }

        window.onload = function() {
            promptFunc();
        }
    </script>
</body>

</html>

在 id="content" 中使用双引号("")

【讨论】：

【解决方案2】：

您的代码在 “content” 引号中有错误。您在 div id="content">

中给出了错误的引号

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Exercise 3</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <p><strong>User Information:</strong></p>
        <div id="content">...</div>



        <script type="text/javascript">
            
            function promptFunc() {
                let text; 
                let name = prompt("What is your full name?", "Name");
                let age = prompt("How old are you?", "Age");
                if (name == null || age == null || name == "" || age ==""){
                  text = "User did not enter information";
                }else {
                    text = `Hi, my name is ${name} and i'm ${age} years old.`;
                }
                document.getElementById("content").innerHTML = text;
            }

             window.onload=function(){
                promptFunc();
            }
        </script>
    </body>

</html>

【讨论】：