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.
This question is related to
javascript
html
variables
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.
You can create a <p> element:
<!DOCTYPE html>_x000D_
<html>_x000D_
<script>_x000D_
var name = prompt("What's your name?");_x000D_
var lengthOfName = name.length_x000D_
p = document.createElement("p");_x000D_
p.innerHTML = "Your name is "+lengthOfName+" characters long.";_x000D_
document.body.appendChild(p);_x000D_
</script>_x000D_
<body>_x000D_
</body>_x000D_
</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?");_x000D_
var lengthOfName = name.length_x000D_
document.getElementById('message').innerHTML = lengthOfName;<p id='message'></p>A good place to start learning how to manipulate pages s the Mozilla Developer Network, they've got a great tutorial about the DOM.
One way you could do it is with document.write, which writes html at the end of the currently loaded part of the document - in this case, after the script tag.
<script>
var name = prompt("What's your name?");
document.write("<p>" + name.length + "</p>");
</script>
But it's not a very clean way of doing it. Keep document.write for testing purpose because in most cases you can't predict where it will append the content.
EDIT: Here, the "clever" way would be to do something like this:
<script type="text/javascript">
window.addEventListener("load", function(e) {
var name = prompt("What's your name?") || "";
var text = document.createTextNode(name.length);
document.getElementById("nameLength").appendChild(text);
});
</script>
<p id="nameLength"></p>
But people are generally lazy and you'll often see .innerHTML = "something" instead of a text node.
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>_x000D_
var name = prompt("What's your name?");_x000D_
var lengthOfName = name.length_x000D_
</script>_x000D_
<body>_x000D_
<p id="a"></p>_x000D_
<p id="b"></p>_x000D_
<script>_x000D_
document.getElementById('a').innerHTML = name;_x000D_
document.querySelector('#b').innerHTML = name.length;</script>_x000D_
</body><head>
<title>Test</title>
</head>
<body>
<h1>Hi there<span id="username"></span>!</h1>
<script>
let userName = prompt("What is your name?");
document.getElementById('username').innerHTML = userName;
</script>
</body>
Try this:
<body>
<div id="divMsg"></div>
</body>
<script>
var name = prompt("What's your name?");
var lengthOfName = name.length;
document.getElementById("divMsg").innerHTML = "Length: " + lengthOfName;
</script>
Source: Stackoverflow.com