Question

好的，我有这个简化的代码，我想在这个页面上做什么。我希望浏览器在加载页面时立即显示提示，询问他们的名字。一旦他们回答了他们的名字是什么，它就需要变量（名称）并将其写入div中，并使用id＆＃34; welcomeText＆＃34;。它只是因某种原因而无法工作......请帮助谢谢。

继承我的代码。将它全部放在html索引中以使其更易于阅读。

<title>Welcome to Validus</title>

<style>
#welcomeText {
         font-family:Verdana;
         font-size:12px;
         color:black;
         width:100px;
         height:100px;
         margin:0px auto;
}
</style>

<script type="text/javascript">

 var name=prompt("Hey! Welcome to Validus! Whats your name?", "Name");

 document.getElementById("welcomeText").innerHTML = "Hey" + " " + name + "! " + "Welcome to validus...";

</script>

</head>
<body>

<div id="welcomeText">
</div>

</body>

Answer 1

将脚本移动到底部，就在关闭正文标记之前。否则，页面上尚不存在“welcomeText”以供参考。

Answer 2

window.onload 在页面加载完成后启动。

还有其他许多方法来完成你需要的东西......

的window.onload = FUNC;
window.addEventListener（ '负载'，FUNC，FALSE）;
window.addEventListener（ 'DOMContentLoaded'，FUNC，FALSE）;
或者只是在身体标记的末尾添加javascript。 <script></script></body>
window.addEventListener（ 'DOMContentReady'，FUNC，FALSE）;
使用jquery ......

最常见且兼容的是window.onload。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Validus</title>
<style>
#welcomeText {
 font-family:Verdana;
 font-size:12px;
 color:black;
 width:100px;
 height:100px;
 margin:0px auto;
}
</style>
<script type="text/javascript">
window.onload=function(){
 var name=prompt("Hey! Welcome to Validus! Whats your name?", "Name");
 document.getElementById("welcomeText").innerHTML = name;
}
</script>
</head>
<body>
<div id="welcomeText"></div>
</body>
</html>

Answer 3

根据我的评论使用document.createTextNode进行演示。

另见window.onload和addEventListener

注释

加载事件在文档加载过程结束时触发。在   至此，文档中的所有对象都在DOM中，而且都是   图像和子帧已完成加载。

旧版IE（IE <9）不支持addEventListener，您需要使用attachEvent。

HTML

<div id="welcomeText"></div>

CSS

#welcomeText {
    font-family:Verdana;
    font-size:12px;
    color:black;
    width:100px;
    height:100px;
    margin:0px auto;
}

的Javascript

function doWelcome() {
    window.removeEventListener("load", doWelcome);

    var name = prompt("Hey! Welcome to Validus! Whats your name?", "Name");

    document.getElementById("welcomeText").appendChild(document.createTextNode("Hey" + " " + name + "! " + "Welcome to validus..."));
}

window.addEventListener("load", doWelcome, false);

在jsfiddle

上

Answer 4

这是一个使用jQuery的例子......

关键是使用$(document).ready(function() {} );，以便在javascript尝试更新之前，DIV存在于DOM中。

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

        <style>
            table, tr, td {border:1px solid green;border-collapse:collapse;padding:5px 5px;}
        </style>

        <script type="text/javascript">
            $(document).ready(function() {

                var name=prompt("Hey! Welcome to Validus! Whats your name?", "Name");
                $("#welcomeText").html("Hey" + " " + name + "! " + "Welcome to validus...");


            }); //END $(document).ready()

        </script>
    </head>
<body>

    <div id="welcomeText"></div>

</body>
</html>

使用提示更改div内的文本

4 个答案: