Question

我存储了两个生成模拟两个随机掷骰子的变量。我正在尝试将它们添加到另一个段落中，如下所示;但是，添加它们的行会生成“NaN”。有什么建议吗？

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>Rolling Two Dice</title>
  </head>
  <body>
    <p>Your first die rolled a <script>var roll1 = document.write(1 +
    Math.floor(6 * Math.random()))</script>.</p>
    <p>Your second die rolled a <script>var roll2 = document.write(1 +
    Math.floor(6 * Math.random()))</script>.</p>
    <p>The total of your rolls is <script>document.write(roll1 +roll2)</script>.</p>
</body>
</html>

Answer 1

存储数字，而不是document.write的回报（我不知道它返回的是什么）。此外，我已经从您的javascript中分离了您的HTML，因为使用document.write不是一个好习惯，并且将功能代码（javascript）与表示代码（HTML）混合是一种不好的做法。

HTML：

<body>
    <p>Your first die rolled a <span id="roll1"></span>.</p>
    <p>Your second die rolled a <span id="roll2"></span>.</p>
    <p>The total of your rolls is <span id="total"></span>.</p>
</body>

JS：

var roll1 = 1 + Math.floor(6 * Math.random());
var roll2 = 1 + Math.floor(6 * Math.random());
var total = roll1 + roll2;
document.getElementById('roll1').textContent = roll1;
document.getElementById('roll2').textContent = roll2;
document.getElementById('total').textContent = total;

*请注意，textContent属性不适用于某些浏览器。

Answer 2

您需要将值分配给变量，然后将变量写入文档。

<script>var roll1 = 1 + Math.floor(6 * Math.random());  document.write(roll1)</script>

我还建议将所有脚本移动到一个块，如jbabey所示。所以你的HTML上没有任何JS线。在单个块中使用javascript来更新带有值的span的内容。

Answer 3

根据您的样本：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Rolling Two Dice</title>
    <script>
        var roll1 = 1 + Math.floor(6 * Math.random());
        var roll2 = 1 + Math.floor(6 * Math.random());
        var total = roll1 + roll2
    </script>
</head>
<body>
<p>Your first die rolled a <script>document.write(roll1)</script>.</p>
<p>Your second die rolled a <script>document.write(roll2)</script>.</p>
<p>The total of your rolls is <script>document.write( total )</script>.</p>
</body>
</html>

问题主要是：

<script>var roll1 = document.write(1 + Math.floor(6 * Math.random()))</script>

document.write不会返回您可以分配给变量的值。

在HTML包围的javascript中添加两个变量

3 个答案: