Question

我正在尝试制作一个简单的页面，询问您的姓名，然后使用name.length（JavaScript）来确定您的姓名有多长。

到目前为止，这是我的代码：

<script>
var name = prompt("What's your name?");
var lengthOfName = name.length
</script>
<body>
</body>

我不太确定要在body标签中放什么，以便我可以使用我之前说过的那些变量。我意识到这可能是一个非常初学的问题，但我似乎无法找到答案。

Answer 1

您不在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>

Answer 2

您可以创建<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>

Answer 3

您可以创建一个带有id的元素，然后将该长度值分配给该元素。

＆＃13;

var name = prompt("What's your name?");
var lengthOfName = name.length
document.getElementById('message').innerHTML = lengthOfName;

＆＃13;

<p id='message'></p>

＆＃13;

Answer 4

试试这个：

<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>

Answer 5

你不能在html中使用js变量。要将javascript变量的内容添加到html使用innerHTML（）或创建任何html标记，请将该变量的内容添加到该创建的标记，并将该标记附加到正文或html中的任何其他现有标记。

Answer 6

您要编辑的HTML标记称为DOM（文档对象操作），您可以在文档全局对象中编辑包含许多函数的DOM。

几乎可以在任何浏览器上运行的最佳示例是document.getElementById，它搜索html标记，并将该ID设置为属性。

还有另一个选项更容易，但只适用于现代浏览器（IE8 +），querySelector函数，它会找到匹配选择器的第一个元素（CSS选择器）。

两种选择的例子：

＆＃13;

<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>

＆＃13;

Answer 7

一个开始学习如何操作Mozilla开发者网络页面的好地方，他们有一个关于DOM的精彩教程。

你可以做到的一种方法是使用document.write，它在文档的当前加载部分的末尾写入html - 在这种情况下，在脚本标记之后。

<script>
  var name = prompt("What's your name?");
  document.write("<p>" + name.length + "</p>");
</script>

但这不是一个非常干净的方式。保留document.write用于测试目的，因为在大多数情况下，您无法预测它将附加内容的位置。

编辑：在这里，“聪明”的方式是做这样的事情：

<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>

但是人们通常很懒，你经常会看到.innerHTML = "something"而不是文字节点。

如何在HTML中使用此JavaScript变量？

8 个答案: