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:
var name = prompt["What's your name?"];
var lengthOfName = name.length
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.
window.onload = function[]{
var name = prompt["What's your name?"];
var lengthOfName = name.length
document.getElementById['output'].innerHTML = lengthOfName;
};
answered May 4, 2015 at 17:18
gen_Ericgen_Eric
217k40 gold badges295 silver badges334 bronze badges
6
You can create a element:
var name = prompt["What's your name?"];
var lengthOfName = name.length
p = document.createElement["p"];
p.innerHTML = "Your name is "+lengthOfName+" characters long.";
document.body.appendChild[p];
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
Test
Hi there!
let userName = prompt["What is your name?"];
document.getElementById['username'].innerHTML = userName;
answered Nov 27, 2019 at 20:15
0
Try this:
var name = prompt["What's your name?"];
var lengthOfName = name.length;
document.getElementById["divMsg"].innerHTML = "Length: " + lengthOfName;
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:
var name = prompt["What's your name?"];
var lengthOfName = name.length
document.getElementById['a'].innerHTML = name;
document.querySelector['#b'].innerHTML = name.length;
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:
const name = prompt["What's your name?"] ?? "";
document.write[`${name.length}
`];
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
const nameInput = document.getElementById["name-input"];
const nameLengthOutput = document.getElementById["name-length-output"];
nameInput.addEventListener["input", e => {
nameLengthOutput.textContent = nameInput.value.length;
}];
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