Skip to content Skip to sidebar Skip to footer
Home / Document.write / Html / Javascript

Using A Prompt To Change Text Inside Of A Div

Post a Comment
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 answ

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

Solution 2:

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

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

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

the most common and compatible is window.onload.

<!doctype html><html><head><metacharset="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><scripttype="text/javascript">window.onload=function(){
 var name=prompt("Hey! Welcome to Validus! Whats your name?", "Name");
 document.getElementById("welcomeText").innerHTML = name;
}
</script></head><body><divid="welcomeText"></div></body></html>

Solution 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

functiondoWelcome() {
    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

Solution 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><scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><scriptsrc="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script><linkrel="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:5px5px;}
        </style><scripttype="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><divid="welcomeText"></div></body></html>

Post a Comment for "Using A Prompt To Change Text Inside Of A Div"