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

Jos*_*eph 16 html javascript variables

我正在尝试创建一个简单的页面,询问您的名字,然后使用name.length(JavaScript)来确定您的名字有多长.

到目前为止这是我的代码:

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

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

Roc*_*mat 34

您不在HTML中"使用"JavaScript变量.HTML不是一种编程语言,它是一种标记语言,它只是"描述"页面应该是什么样子.

如果要在屏幕上显示变量,可以使用JavaScript完成.

首先,你需要一个地方写它:

<body>
    <p id="output"></p>
</body>
Run Code Online (Sandbox Code Playgroud)

然后,您需要更新JavaScript代码以写入该<p>标记.确保在页面准备好后再这样做.

<script>
window.onload = function(){
    var name = prompt("What's your name?");
    var lengthOfName = name.length

    document.getElementById('output').innerHTML = lengthOfName;
};
</script>
Run Code Online (Sandbox Code Playgroud)

window.onload = function() {
  var name = prompt("What's your name?");
  var lengthOfName = name.length

  document.getElementById('output').innerHTML = lengthOfName;
};
Run Code Online (Sandbox Code Playgroud)
<p id="output"></p>
Run Code Online (Sandbox Code Playgroud)

  • 谢谢!所以我会将脚本放在body标签之后? (2认同)
  • @Joseph:脚本标签通常放在 `&lt;head&gt;` 中。`window.onload` 绑定一个事件,以便在页面加载之前代码不会运行。 (2认同)
  • 好的谢谢!最佳答案:)但是,如果我要删除该window.onload并将其放在开头,这会有所改变吗? (2认同)
  • @Joseph:一切都会改变!当浏览器加载页面时,它是从上到下开始的。因此,如果删除`window.onload`,那么它将尝试在存在之前写入&lt;p&gt;标签。您可以*仅当您将脚本标签放在&lt;body&gt;之后之后才能删除window.onload。我更喜欢将脚本保存在`&lt;head&gt;`中。 (2认同)

小智 7

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

var name = prompt("What's your name?");
var lengthOfName = name.length
document.getElementById('message').innerHTML = lengthOfName;
Run Code Online (Sandbox Code Playgroud)
<p id='message'></p>
Run Code Online (Sandbox Code Playgroud)

  • `.value` 不会存在于 `&lt;p&gt;`,只有 `input`。PS我不是downvoter,这个答案很容易解决,然后是一个正确的答案。 (2认同)

use*_*823 5

您可以创建一个<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>
Run Code Online (Sandbox Code Playgroud)