Using A Prompt To Change Text Inside Of A Div

December 12, 2022 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...

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>

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

Baca Juga

<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

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

Html5 Academy

Using A Prompt To Change Text Inside Of A Div

Solution 1:

Solution 2:

Solution 3:

Solution 4:

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