How set html variable in javascript?

I'm trying to make a simple page that asks you for your name, and then uses name.length (JavaScript) to figure out how long your name is.

This is my code so far:

I'm not quite sure what to put within the body tags so that I can use those variables that I stated before. I realize that this is probably a really beginner level question, but I can't seem to find the answer.

Arun Bertil

4,4424 gold badges32 silver badges59 bronze badges

asked May 4, 2015 at 17:12

2

You don't "use" JavaScript variables in HTML. HTML is not a programming language, it's a markup language, it just "describes" what the page should look like.

If you want to display a variable on the screen, this is done with JavaScript.

First, you need somewhere for it to write to:

Then you need to update your JavaScript code to write to that

tag. Make sure you do so after the page is ready.

answered May 4, 2015 at 17:18

gen_Ericgen_Eric

217k40 gold badges295 silver badges334 bronze badges

6

You can create a

element:

answered May 4, 2015 at 17:16

user1823user1823

1,0916 silver badges19 bronze badges

3

You can create an element with an id and then assign that length value to that element.

var name = prompt("What's your name?");
var lengthOfName = name.length
document.getElementById('message').innerHTML = lengthOfName;

Quentin

876k121 gold badges1173 silver badges1288 bronze badges

answered May 4, 2015 at 17:15

imran qasimimran qasim

1,06013 silver badges18 bronze badges

1

    



    
Hi there!
    

answered Nov 27, 2019 at 20:15

0

Try this:

answered May 4, 2015 at 17:17

Márcio GonzalezMárcio Gonzalez

1,0121 gold badge8 silver badges20 bronze badges

You cannot use js variables inside html. To add the content of the javascript variable to the html use innerHTML() or create any html tag, add the content of that variable to that created tag and append that tag to the body or any other existing tags in the html.

answered May 4, 2015 at 17:16

Kalyan Kumar SKalyan Kumar S

2041 gold badge4 silver badges8 bronze badges

The HTML tags that you want to edit is called the DOM (Document object manipulate), you can edit the DOM with many functions in the document global object.

The best example that would work on almost any browser is the document.getElementById, it's search for html tag with that id set as an attribute.

There is another option which is easier but works only on modern browsers (IE8+), the querySelector function, it's will find the first element with the matched selector (CSS selectors).

Examples for both options:

answered May 4, 2015 at 17:22

InvisibleUn1cornInvisibleUn1corn

6492 gold badges10 silver badges22 bronze badges

You could get away with something as short as this:

It's not a very clean way of doing it but using document.write is not much worse than calling prompt() as soon as the page loads.

A more user-friendly approach would be to have an actual text input on the page and to dynamically update the length as they type using an event listener.

Name: 

Length: 
0

If you want to learn how to manipulate pages with JavaScript, the Mozilla Developer Network has a good tutorial about the DOM.

answered May 4, 2015 at 17:19

DominoDomino

5,91134 silver badges57 bronze badges

3

How set JavaScript variable in HTML?

Can I store HTML in a variable JavaScript?

Can you put HTML in JavaScript?

How do you declare a variable in HTML tag?