好的,我有这个简化的代码,我想在这个页面上做什么。我希望浏览器在加载页面时立即显示提示,询问他们的名字。一旦他们回答了他们的名字是什么,它就需要变量(名称)并将其写入div中,并使用id" welcomeText"。它只是因某种原因而无法工作......请帮助谢谢。
继承我的代码。将它全部放在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>
答案 0 :(得分:1)
将脚本移动到底部,就在关闭正文标记之前。否则,页面上尚不存在“welcomeText”以供参考。
答案 1 :(得分:1)
window.onload 在页面加载完成后启动。
还有其他许多方法来完成你需要的东西......
<script></script></body>
最常见且兼容的是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>
答案 2 :(得分:0)
根据我的评论使用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);
上
答案 3 :(得分:-1)
这是一个使用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>