我正在尝试制作一个简单的页面，询问您的姓名，然后使用 name.length (JavaScript) 来计算您的姓名的长度。
这是我目前的代码：
<script>
var name = prompt("What's your name?");
var lengthOfName = name.length
</script>
<body>
</body>
我不太确定在正文标签中放什么，以便我可以使用我之前提到的那些变量。我意识到这可能是一个非常初级的问题，但我似乎找不到答案。
【问题讨论】：
标签： javascript html variables
您不会在 HTML 中“使用”JavaScript 变量。 HTML 不是一种编程语言，它是一种标记语言，它只是“描述”页面应该是什么样子。
如果你想在屏幕上显示一个变量，这是用 JavaScript 完成的。
首先，您需要在某个地方写信：
<body>
<p id="output"></p>
</body>
然后您需要更新您的 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>【讨论】：
<head> 中。 window.onload 绑定一个事件，这样代码在页面加载之前不会运行。
window.onload，那么它会在<p>标签存在之前尝试写入它。您可以删除window.onload，当且仅当您将脚本标记放在<body> 之后。我更喜欢将我的脚本保存在<head>。
您可以创建一个<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>【讨论】：
您可以创建一个带有 id 的元素，然后将该长度值分配给该元素。
var name = prompt("What's your name?");
var lengthOfName = name.length
document.getElementById('message').innerHTML = lengthOfName;<p id='message'></p>【讨论】：
.value 不会存在于<p>，只有input。 PS我不是反对者，这个答案很容易解决，然后是正确的答案。
<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>
【讨论】：
试试这个：
<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>
【讨论】：
你不能在 html 中使用 js 变量。要将 javascript 变量的内容添加到 html 中，请使用 innerHTML() 或创建任何 html 标记，将该变量的内容添加到创建的标记，并将该标记附加到正文或 html 中的任何其他现有标记。
【讨论】：
您要编辑的 HTML 标签称为 DOM（文档对象操作），您可以通过文档全局对象中的许多功能来编辑 DOM。
几乎可以在任何浏览器上运行的最佳示例是document.getElementById，它会搜索将 id 设置为属性的 html 标记。
还有一个更简单但仅适用于现代浏览器 (IE8+) 的选项，即 querySelector 函数，它将找到匹配选择器（CSS 选择器）的第一个元素。
两个选项的示例：
<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>【讨论】：
你可以用这么短的东西逃脱：
<script>
const name = prompt("What's your name?") ?? "";
document.write(`<p>${name.length}</p>`);
</script>
这不是一种非常干净的方法，但使用 document.write 并不比在页面加载后立即调用 prompt() 差多少。
一种更加用户友好的方法是在页面上输入实际文本，并在用户键入时使用事件侦听器动态更新长度。
<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>如果你想学习如何使用 JavaScript 操作页面，Mozilla 开发者网络有一个关于 DOM 的很好的教程。
【讨论】：
document.write。您应该使用.innerHTML（或.appendChild）。我想如果脚本在页面完全加载之前运行是可以的，但是一旦页面完全加载，document.write 将擦除整个页面。