<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

<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

• javascript
• html
• css

Share Improve this question Follow asked Feb 21, 2015 at 3:18 pfychpfych 92811 gold badge1313 silver badges3232 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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/k04pvhug/1/)

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

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.

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

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