Using Javascript to replace Text in HTML tag with innerHTML and functions

Question

I'm trying to change the text inside a h1 tag using the element id "greeting" and a external java script. I'm having trouble trying to figure out how to call upon my function init that has gathered variables and use them in the next function. Heres what I have so far.

HTML

 <head>

    <title>Matt Beckley</title>
    <script type="text/javascript" src="script1.js"></script>
</head> 

<body>

 <h1 id="greeting">Welcome!</h1>

 </body>
</html>

THE SCRIPT WHERE THE PROBLEM IS!

 window.onload = init;

 function init() 
 {
 var fullname=prompt("Please Enter you name!","Anonymous ");
(fullname == "Anonymous")? "Anonymous " : "";

 var nickname=prompt("Please Enter you nickname!"," None");
 (nickname == "None")? " None": ""; 
 }

 function writeGreeting()
 {
    document.getElementById("greeting").innerHTML= ?????????
 }

So I don't know how to make the last function work so that the h1 tag shows a name and a nick. w3schools only shows "Strings" and not the ability to call the other function. Anyone know how to do this?

Dominic Rodger · Accepted Answer · 2010-01-14 12:22:41Z

1

How about merging the init and writeGreeting functions:

window.onload = init;

function init() 
{
 var fullname=prompt("Please Enter you name!","Anonymous ");
 fullname = (fullname == "Anonymous")? "Anonymous " : "";

 var nickname=prompt("Please Enter you nickname!"," None");
 nickname = (nickname == "None")? " None": ""; 
 document.getElementById("greeting").innerHTML= "Welcome " + fullname + " (" + nickname + ")";
}

p.s. Minor point of grammar - you probably want "Please enter your name", rather than "Please Enter you name", and similarly for the nickname prompt.

answered Jan 14, 2010 at 12:22

Dominic Rodger

100k37 gold badges204 silver badges219 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bobince · Accepted Answer · 2010-01-14 13:05:55Z

1

Why not use .innerText instead?

edited Jan 14, 2010 at 13:05

bobince

538k111 gold badges675 silver badges846 bronze badges

answered Jan 14, 2010 at 12:50

pencilCake

53.8k89 gold badges238 silver badges378 bronze badges

2 Comments

bobince Over a year ago

Because it's IE-only. On other recent browsers you can use the DOM Level 3 Core property textContent instead. But yes, you definitely don't want to be writing unescaped text to innerHTML.

kufudo Over a year ago

As above, innerHTML is dangerous: slideshare.net/x00mario/the-innerhtml-apocalypse

Sampson · Accepted Answer · 2010-01-14 12:23:29Z

0

// Create two GLOBAL variables
var fullname = "";
var nickname = "";

function init() {
  fullname = /* ... */
  nickname = /* ... */
  // pass the nickname on to the greeting function
  writeGreeting(nickname);
}

// This function is remain separate, if you wish to call it again
// at a later time before a page-refresh.
function writeGreeting(name) {
  document.getElementById("greeting").innerHTML = name;
}

answered Jan 14, 2010 at 12:23

Sampson

269k76 gold badges546 silver badges570 bronze badges

Comments

YOU · Accepted Answer · 2010-01-14 12:32:18Z

0

How about like this?

It will display "Welcome fullname!" or "Welcome nickname!" or "Welcome Anonymous!" if you don't put any.

function init() {
     var fullname=prompt("Please Enter you name!");
     var nickname=prompt("Please Enter you nickname!");
     writeGreeting(fullname||nickname||"Anonymous");
}

function writeGreeting(name){
    document.getElementById("greeting").innerHTML= "Welcome "+name+"!";
}

answered Jan 14, 2010 at 12:32

YOU

124k34 gold badges191 silver badges222 bronze badges

Comments

Dominic Rodger · Accepted Answer · 2010-01-14 12:34:50Z

0

I like Dominic's solution. Just bear in mind that you should be careful with any data entered by a user. I would recommend escaping string with escape() function, prior to using it.

e.g.

document.getElementById("greeting").innerHTML= "Welcome " + escape( fullname ) +
                                               " (" + escape( nickname ) + ")";

edited Jan 14, 2010 at 12:34

Dominic Rodger

100k37 gold badges204 silver badges219 bronze badges

answered Jan 14, 2010 at 12:33

Vladimir Kocjancic

1,8404 gold badges23 silver badges37 bronze badges

2 Comments

bobince Over a year ago

That's the wrong escape, it's a JavaScript-specific encoding that is a bit like URL-encoding, but broken. It would mangle common name characters like spaces and accents. escape should never be used for anything. The right escape would be HTML-encoding, replacing < with < and & with &.

Vladimir Kocjancic Over a year ago

Ah. Yet, you have to agree that it is still better than nothing. :)

gp. · Accepted Answer · 2010-01-14 17:45:17Z

0

Try this. Tested with ie, chrome and ff (all latest).

var msg = "Welcome " + fullname + "(" + nickname + ")!";

var greetingElement = document.getElementById("greeting");

if(greetingElement.firstChild == null)
    greetingElement.appendChild(document.createTextNode(msg));
else
    greetingElement.firstChild.nodeValue = msg;

answered Jan 14, 2010 at 17:45

gp.

8,2533 gold badges42 silver badges42 bronze badges

Collectives™ on Stack Overflow

Using Javascript to replace Text in HTML tag with innerHTML and functions

6 Answers 6

Comments

2 Comments

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related