How do I use this JavaScript variable in HTML?
Question
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.
8 answers
solution1
76 ACCPTED 2015-05-04 17:18:09
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 id="output"></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 id="output"></p>
solution2
10 2015-05-04 17:16:48
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>
solution3
7 2015-05-04 17:15:22
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>
solution4
2 2019-11-27 20:15:59
<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>
solution5
1 2015-05-04 17:17:09
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>
solution6
0 2015-05-04 17:16:41
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.
solution7
0 2015-05-04 17:22:41
您要编辑的 HTML 标签称为 DOM（文档对象操作），您可以使用文档全局对象中的许多功能来编辑 DOM。
几乎可以在任何浏览器上运行的最佳示例是document.getElementById<\/code> ，它搜索带有该 id 设置为属性的 html 标记。
还有另一个更简单但仅适用于现代浏览器（IE8+）的选项，querySelector 函数，它将找到具有匹配选择器（CSS 选择器）的第一个元素。
两个选项的示例：
<script> var name = prompt("What's your name?"); var lengthOfName = name.length <\/script> <body> <p id="a"> <p id="b"> <script> document.getElementById('a').innerHTML = name; document.querySelector('#b').innerHTML = name.length;<\/script> <\/body><\/code><\/pre>"solution8
-2 2015-05-04 17:19:32
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 id="name-input"></label><br> Length: <output id="name-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 .
solution9
-2 2022-09-22 11:21:57
400
1.
List 7777777
enter code here
- List item
item ---------
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.