如何在 HTML 中使用这个 JavaScript 变量？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30035932/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I use this JavaScript variable in HTML?
提问by Joseph
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.
我正在尝试制作一个简单的页面，询问您的姓名，然后使用 name.length (JavaScript) 来确定您的姓名有多长。
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.
我不太确定在 body 标签中放什么，以便我可以使用我之前声明的那些变量。我意识到这可能是一个非常初级的问题，但我似乎无法找到答案。
回答by Rocket Hazmat
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.
您不会在 HTML 中“使用”JavaScript 变量。HTML 不是一种编程语言，它是一种标记语言，它只是“描述”页面应该是什么样子。
If you want to display a variable on the screen, this is done with JavaScript.
如果你想在屏幕上显示一个变量，这是用 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 afterthe page is ready.
然后您需要更新您的 JavaScript 代码以写入该<p>标签。确保在页面准备好后执行此操作。
<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>回答by imran qasim
You can create an element with an id and then assign that length value to that element.
您可以创建一个带有 id 的元素，然后将该长度值分配给该元素。
var name = prompt("What's your name?");
var lengthOfName = name.length
document.getElementById('message').innerHTML = lengthOfName;<p id='message'></p>回答by user1823
You can create a <p>element:
您可以创建一个<p>元素：
<!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>回答by Márcio Gonzalez
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>
回答by Kalyan Kumar S
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.
您不能在 html 中使用 js 变量。要将 javascript 变量的内容添加到 html 使用 innerHTML() 或创建任何 html 标记，将该变量的内容添加到该创建的标记并将该标记附加到正文或 html 中的任何其他现有标记。
回答by InvisibleUn1corn
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.
您要编辑的 HTML 标签称为 DOM（文档对象操作），您可以使用文档全局对象中的许多功能来编辑 DOM。
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.
几乎可以在任何浏览器上工作的最佳示例是document.getElementById，它使用该 id 设置为属性来搜索 html 标记。
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).
还有另一种更简单但仅适用于现代浏览器（IE8+）的选项，即 querySelector 函数，它将找到具有匹配选择器（CSS 选择器）的第一个元素。
Examples for both options:
两个选项的示例：
<script>
var name = prompt("What's your name?");
var lengthOfName = name.length
</script>
<body>
<p id="a"></p>
<p id="b"></p>
<script>
document.getElementById('a').innerHTML = name;
document.querySelector('#b').innerHTML = name.length;</script>
</body>回答by Nico
<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>
回答by Domino
A good place to start learning how to manipulate pages s the Mozilla Developer Network, they've got a great tutorial about the DOM.
Mozilla Developer Network 是开始学习如何操作页面的好地方，他们有关于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.
一种方法是使用document.write，它在当前加载的文档部分的末尾写入 html - 在这种情况下，在脚本标记之后。
<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.writefor testing purpose because in most cases you can't predict where it will append the content.
但这不是一种非常干净的方法。保留document.write用于测试目的，因为在大多数情况下您无法预测它将添加内容的位置。
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.
但是人们通常很懒惰，您经常会看到.innerHTML = "something"而不是文本节点。
