我如何在 HTML 中使用这个 JavaScript 变量？
[英]How do I use this JavaScript variable in HTML?
问题描述
我正在尝试制作一个简单的页面，询问您的姓名，然后使用 name.length (JavaScript) 来计算您的姓名的长度。
到目前为止，这是我的代码：
<script>
var name = prompt("What's your name?");
var lengthOfName = name.length
</script>
<body>
</body>
我不太确定要在 body 标签中放置什么，以便我可以使用我之前声明的那些变量。 我意识到这可能是一个非常初级的问题，但我似乎找不到答案。
8 个解决方案
解决方案1
76 已采纳 2015-05-04 17:18:09
您不会在 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>
解决方案2
10 2015-05-04 17:16:48
您可以创建一个<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>
解决方案3
7 2015-05-04 17:15:22
您可以创建一个带有 id 的元素，然后将该长度值分配给该元素。
var name = prompt("What's your name?"); var lengthOfName = name.length document.getElementById('message').innerHTML = lengthOfName;
<p id='message'></p>
解决方案4
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>
解决方案5
1 2015-05-04 17:17:09
试试这个：
<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>
解决方案6
0 2015-05-04 17:16:41
您不能在 html 中使用 js 变量。 要将 javascript 变量的内容添加到 html 使用 innerHTML() 或创建任何 html 标记，将该变量的内容添加到创建的标记，并将该标记附加到正文或 html 中的任何其他现有标记。
解决方案7
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>"解决方案8
-2 2015-05-04 17:19:32
你可以摆脱这样简短的事情：
<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的教程。
解决方案9
-2 2022-09-22 11:21:57
400
1.
清单 7777777
enter code here
- 项目清单
物品 - - - - -
如何使用HTML输入框设置JavaScript变量？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.