0

好的，所以我在这个页面上有了我想要做的简化代码。我希望浏览器在加载页面后立即显示提示，询​​问他们的姓名。一旦他们回答了他们的名字，它就会使用该变量（名称）并将其写入 id 为“welcomeText”的 div 中。由于某种原因，它无法正常工作...请帮助谢谢。

这是我的代码。将其全部放在 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>
4

4 回答 4

1

将脚本移动到底部，就在结束 body-tag 之前。否则，页面上尚不存在“welcomeText”以供参考。

于 2013-06-18T23:00:50.183 回答
1

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

还有其他许多方法可以满足您的需求...

  1. 窗口.onload=函数；
  2. window.addEventListener('load',func,false);
  3. window.addEventListener('DOMContentLoaded',func,false);
  4. 或者只是将您的 javascript 附加到您的 body 标记的末尾。<script></script></body>
  5. window.addEventListener('DOMContentReady',func,false);
  6. 使用 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>
于 2013-06-18T23:03:22.157 回答
0

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

另见window.onload和addEventListener

笔记

load 事件在文档加载过程结束时触发。至此，文档中的所有对象都在 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 上

于 2013-06-18T23:17:50.283 回答
-1

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

关键是 using$(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>
于 2013-06-18T23:12:36.197 回答