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:
<script>
var name = prompt("What's your name?");
var lengthOfName = name.length
</script>
<body>
</body>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.
28 Answers
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:
<body> <p></p>
</body>Then you need to update your JavaScript code to write to that <p> tag. Make sure you do so after the page is ready.
<script>
window.onload = function(){ var name = prompt("What's your name?"); var lengthOfName = name.length document.getElementById('output').innerHTML = lengthOfName;
};
</script>window.onload = function() { var name = prompt("What's your name?"); var lengthOfName = name.length document.getElementById('output').innerHTML = lengthOfName;
};<p></p>You can create a <p> element:
<!DOCTYPE html>
<html> <script> 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); </script> <body> </body> </html>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;<p id='message'></p><head> <title>Test</title>
</head>
<body> <h1>Hi there<span></span>!</h1> <script> let userName = prompt("What is your name?"); document.getElementById('username').innerHTML = userName; </script>
</body>Try this:
<body> <div></div>
</body>
<script> var name = prompt("What's your name?"); var lengthOfName = name.length; document.getElementById("divMsg").innerHTML = "Length: " + lengthOfName;
</script>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.
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:
<script>
var name = prompt("What's your name?");
var lengthOfName = name.length
</script>
<body> <p></p> <p></p> <script> document.getElementById('a').innerHTML = name;
document.querySelector('#b').innerHTML = name.length;</script>
</body>You could get away with something as short as this:
<script> const name = prompt("What's your name?") ?? ""; document.write(`<p>${name.length}</p>`);
</script>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.
<label>Name: <input></label><br>
Length: <output for="name-input">0<output>
<script type="module"> const nameInput = document.getElementById("name-input"); const nameLengthOutput = document.getElementById("name-length-output"); nameInput.addEventListener("input", e => { nameLengthOutput.textContent = nameInput.value.length; });
</script>If you want to learn how to manipulate pages with JavaScript, the Mozilla Developer Network has a good tutorial about the DOM.
3
