Add value to existing value

Question

When a user types in an input box, I want their name to be displayed after the text 'hello'. Instead of doing this, the word 'hello' is removed and replaced by their name.

var name = document.getElementById('username');
var div = document.getElementById('displayname');

name.onkeyup = function() {
  div.value = name.value;
}

<input type="text" placeholder="Name" id="username">
<input type="submit" id="displayname" value="Hello">

JsFiddle: https://jsfiddle.net/t01prhx4/

There’s one subtle error in your code in the snippet: [do not use the variable name `name`](http://stackoverflow.com/q/10523701/4642212) (in a global scope), as it is a global string property of `window`. — Sebastian Simon, Jul 02 '16 at 11:27

score 0 · Answer 1 · answered Jul 02 '16 at 11:23

0

You can do it like this:

name.onkeyup = function(){
    div.value = 'Hello ' + name.value;
}

answered Jul 02 '16 at 11:23

D.Dimitrioglo

3,413
2
21
41

score 0 · Accepted Answer · answered Jul 02 '16 at 11:23

0

Simple add hello before the

var name = document.getElementById('username');
var div = document.getElementById('displayname');

name.onkeyup = function(){
   div.value = "Hello " + name.value;
}

https://jsfiddle.net/98c16uv5/

answered Jul 02 '16 at 11:23

ScaisEdge

131,976
10
91
107

Thanks, I didn't know it was this simple! I was thinking about concatenating the values and going down that route.... – The Codesee Jul 02 '16 at 11:25
If you don't want use the literal value you can set a var with "hello " an refer to this var .. – ScaisEdge Jul 02 '16 at 11:28

score 0 · Answer 3 · answered Jul 02 '16 at 11:24

0

Do this :

 name.onkeyup = function(){
        div.value = 'Hello ' + this.value;
    }

answered Jul 02 '16 at 11:24

Siddharth

505
2
4
9

score -1 · Answer 4 · answered Jul 02 '16 at 11:23

-1

Is this what you want?

var name = document.getElementById('username');
var div = document.getElementById('displayname');

name.onkeyup = function(){
    div.value = 'Hello ' + name.value;
}

https://jsfiddle.net/oapfc1Lo/

answered Jul 02 '16 at 11:23

AlexG

3,617
1
23
19

Add value to existing value

4 Answers4