Display a var in a span

Question

<div id=name>Whats your Name?: <input type="text" id="User">
<input type="button" value="submit" onclick="giveUser()"/>
<br> I dont know your Name </br>
</div>
<br>
<div id=P2>
Oh its <span id=User>Default</span>!
</div>
<script>

function giveUser() {
var User = document.getElementById("User").value;
console.log(User)
document.getElementById('User').innerHTML = User;
document.getElementById('name').style.visibility = 'hidden';
document.getElementById('P2').style.visibility = 'visible';
}

</script>

Here i am asking the user there name through a textbox but it won't display it in the span.

here is a fiddle demo

score 4 · Accepted Answer · edited May 23 '17 at 12:33

4

ID attributes should be unique. Your span and input both have an ID of User

Change the ID of one and then try again. (https://jsfiddle.net/k04pvhug/1/)

In addition, you should enclose all your attributes with quotes ("). It's not required, but it looks cleaner ;)

edited May 23 '17 at 12:33

Community

1
1

answered Feb 21 '15 at 03:21

Jack

9,151
2
32
44

score 1 · Answer 2 · answered Feb 21 '15 at 03:22

1

You need quotes around the id's.

<span id="someid" />

Then JavaScript can access the DOM and set innerHTML
Also, P2 is a pre-defined setting, so it's not aviable as an id anyway. try "paragraphTwo" or something.

answered Feb 21 '15 at 03:22

Travis

1,274
1
16
33

score 1 · Answer 3 · edited Feb 23 '15 at 05:46

1

Give the quotes around id and make sure that each attribute has the unique id like this

<span id="id" />
<p id="paragraph" />
<span id="span2" />

edited Feb 23 '15 at 05:46

Travis

1,274
1
16
33

answered Feb 21 '15 at 04:39

varad mayee

619
7
19

`id="id"` isn't a unique id either, and the DOM won't change. – Travis Feb 22 '15 at 19:28
@Wyatt ID name is of your's choice i just entered that it should be like this – varad mayee Feb 23 '15 at 04:41

score 0 · Answer 4 · answered Feb 21 '15 at 03:41

Use a different name for the var and the id

function giveUser() {
        var User = document.getElementById("User").value;
        console.log(User)
        document.getElementById("demo").innerHTML = User ;
        document.getElementById('name').style.visibility = 'hidden';
        document.getElementById('P2').style.visibility = 'visible';
    }

#P2 {
        visibility: hidden;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=name>Whats your Name?:
    <input type="text" id="User">
    <input type="button" value="submit" onclick="giveUser()" />
    <br>I dont know your Name</br>
</div>
<br>
<div id=P2>Oh its <span id="demo">Default</span>!</div>

Display a var in a span

4 Answers4