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

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标签中放什么,以便我可以使用我之前说过的那些变量。我意识到这可能是一个非常初级的问题,但我似乎无法找到答案。

7 个解决方案

#1

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 after the page is ready.

然后,您需要更新JavaScript代码以写入该

标记。确保在页面准备好后再这样做。

<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

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>

#3

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>

#4

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>

#5

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中的任何其他现有标记。

#6

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,它搜索html标记,并将该id设置为属性。

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>

#7

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开发者网络页面的好地方,他们有一个关于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.write for 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”而不是文本节点。

#1