How to update span element in HTML with javascript variable?

Question

I'm trying to update a span element to show my javascript variable is this correct?

var hometown = "Indianapolis" ;
document.getElementById('hometown').innerHTML = 'Indianapolis';

Hometown: <span id="hometown"></span>

thanks for any help

You can also use textContent if you're only updating text. — evolutionxbox
– evolutionxbox, Commented Jan 22, 2017 at 22:14
This works. If it is not working for you, perhaps it is your browser. innerText is another similar to innerHTML. — Michael Bruce
– Michael Bruce, Commented Jan 22, 2017 at 22:22

Sam · Accepted Answer · 2017-01-22 22:32:08Z

3

It is basically correct except that you never use your variable, so there is no point to the variable. If you want to use the variable to change it you can do this instead.

var hometown = "Indianapolis";
document.getElementById('hometown').innerHTML = hometown;

Hometown: <span id="hometown"></span>

With this code, you can have a text input that gets set to the variable hometown, like this.

function update() {
var hometown = document.getElementById("text").value;
document.getElementById("hometown").innerHTML = hometown;
  }

Hometown: <span id="hometown"></span>
<br>
<input type="text" id="text">
<input type="button" onClick="update()" value="Update">

I know this one is a little complicated, but it works, and it's all your code.

answered Jan 22, 2017 at 22:32

Sam

3136 silver badges17 bronze badges

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

Comments

Siah · Accepted Answer · 2017-01-22 22:26:57Z

2

Not completely. You are not using the variable.

document.getElementById('hometown').innerHTML = hometown;

Since you are not setting html content, using .textContent property is a better option:

document.getElementById('hometown').textContent = hometown;

Also make sure that element is added to DOM before selecting it, i.e. put the script after the target span element.

Hometown: <span id="hometown"></span>
<script> /* JavaScript code goes here */  </script>

edited Jan 22, 2017 at 22:26

answered Jan 22, 2017 at 22:21

Siah

3612 silver badges6 bronze badges

Collectives™ on Stack Overflow

How to update span element in HTML with javascript variable?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related