使用提示更改div内的文本

时间:2013-06-18 22:57:48

标签: javascript html document.write

好的,我有这个简化的代码,我想在这个页面上做什么。我希望浏览器在加载页面时立即显示提示,询​​问他们的名字。一旦他们回答了他们的名字是什么,它就需要变量(名称)并将其写入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>

4 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

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

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

  1. 的window.onload = FUNC;
  2. window.addEventListener( '负载',FUNC,FALSE);
  3. window.addEventListener( 'DOMContentLoaded',FUNC,FALSE);
  4. 或者只是在身体标记的末尾添加javascript。 <script></script></body>
  5. window.addEventListener( 'DOMContentReady',FUNC,FALSE);
  6. 使用jquery ......
  7. 最常见且兼容的是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.onloadaddEventListener

  

注释

     

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

答案 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>