Using a prompt to change text inside of a div [duplicate]

问题

Ok so I have this simplified code of what I am trying to do on this page. I want the browser to display a prompt as soon as they load the page asking for their name. Once they answer what their name is it takes that variable (name) and writes it inside of the div with the id "welcomeText". It just won't work for some reason... Please help thanks.

Heres my code. Put it all inside of a html index to make it easier to read.

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

回答1:

Move the script to the bottom, just before the closing body-tag. Otherwise, 'welcomeText' doesn't yet exist on the page to refer to.

回答2:

window.onload is launched when the page has finished loading.

there are also other many ways to acomplish what u need...

window.onload=func;
window.addEventListener('load',func,false);
window.addEventListener('DOMContentLoaded',func,false);
or just append your javascript at the end of your body tag. <script></script></body>
window.addEventListener('DOMContentReady',func,false);
using jquery...

the most common and compatible is 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>

回答3:

To demonstrate using document.createTextNode as per my comment.

Also see window.onload and addEventListener

Notes

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.

addEventListener is not supported on older versions of IE (IE < 9) and you need to use attachEvent instead.

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);

On jsfiddle

回答4:

Here's an example using jQuery...

The key is using $(document).ready(function() {} ); so that the DIV exists in the DOM before the javascript tries to update it.

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

来源：https://stackoverflow.com/questions/17180378/using-a-prompt-to-change-text-inside-of-a-div

标签

javascript

html

document.write