Using a prompt to change text inside of a div

Question

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>

Using [`.innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/element.innerHTML) with user input can expose you to security issues. Consider [`.textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent) if available or use [`document.createTextNode`](https://developer.mozilla.org/en-US/docs/Web/API/document.createTextNode) — Xotic750, Jun 18 '13 at 23:07

score 1 · Answer 1 · answered Jun 18 '13 at 23:00

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.

answered Jun 18 '13 at 23:00

Andy G

18,518
5
42
63

1

No problem. This does mean, however, that I am encouraging you to do this. Nothing would make me leave a site faster! Modern web-sites do not use prompt(). – Andy G Jun 18 '13 at 23:07

cocco · Answer 2 · 2013-06-18T23:24:56.173

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>

You can make your answer better by explaining why `window.onload` should be used. — Felix Kling, Jun 18 '13 at 23:15
my code is better than my english... but as this is a english page i think many ppl understand what window on load means? but your right. — cocco, Jun 18 '13 at 23:20

Xotic750 · Answer 3 · 2013-06-18T23:31:25.673

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

score -1 · Answer 4 · answered Jun 18 '13 at 23:12

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>

Why jquery-ui and it's associated CSS file when it is not being used? Especially as the OP did not flag for a jquery answer. And what is the extra `table, tr, td` CSS for? — Xotic750, Jun 18 '13 at 23:38

Using a prompt to change text inside of a div

4 Answers4

Linked