Question

我想输出2个不同的随机数组对象。这就是我到目前为止所得到的。但是它只显示1个输出而不是2个。这怎么可能？我想输出2个不同的随机数组对象。这就是我到目前为止所得到的。但是它只显示1个输出而不是2个。这怎么可能？

<!DOCTYPE html>
<html>
<head>

</head>

<body>
<script>


  
  var myArray = [
  "Apples",
  "Bananas",
  "Pears"
];

    
var randomItem1 = myArray[Math.floor(Math.random()*myArray.length)];
var randomItem2 = myArray[Math.floor(Math.random()*myArray.length)];


document.getElementById("randomItem1").innerHTML=randomItem1;
document.getElementById("randomItem2").innerHTML=randomItem2;

  

</script>


<div id = "randomItem1"> </div>
<div id = "randomItem2"> </div>

</body>

</html>

Answer 1

您的代码几乎是正确的，唯一的问题是您正在覆盖文档正文，而不是两个不同的div。

您还在html之前执行javascript，因此它会搜索未加载的元素。将javascript放在html之后可以解决该问题。

这样做：

<!DOCTYPE html>
<html>
<head>

</head>

<body>



<div id = "randomItem1"> </div>
<div id = "randomItem2"> </div>

</body>
<script>



    var myArray = [
    "Apples",
    "Bananas",
    "Pears"
  ];


  var randomItem1 = myArray[Math.floor(Math.random()*myArray.length)];
  var randomItem2 = myArray[Math.floor(Math.random()*myArray.length)];


  document.getElementById("randomItem1").innerHTML=randomItem1;
  document.getElementById("randomItem2").innerHTML=randomItem2;



</script>
</html>

要进行测试，您可以在行之间添加console.log(randomItem1)和console.log(randomItem2)。

Answer 2

有两件事是错的：

document.body.innerHTML = randomItem1;将覆盖现有元素
更新至例如document.getElementById("randomItem1").innerHTML = randomItem1;，<script>块需要放置在元素之后，否则将不会发现它们没有被解析并加载到DOM中。
< / li>

<!DOCTYPE html>
<html>
<head>

</head>

<body>

<div id = "randomItem1"> </div>
<div id = "randomItem2"> </div>

<script>
  var myArray = [
    "Apples",
    "Bananas",
    "Pears"
  ];

  var randomItem1 = myArray[Math.floor(Math.random()*myArray.length)];
  var randomItem2 = myArray[Math.floor(Math.random()*myArray.length)];

  document.getElementById("randomItem1").innerHTML = randomItem1;
  document.getElementById("randomItem2").innerHTML = randomItem2;
</script>

</body>

</html>

另一种方法是使用事件侦听器，该侦听器将在DOM准备就绪时触发。

<!DOCTYPE html>
<html>
<head>

</head>

<body>

<script>
  var myArray = [
    "Apples",
    "Bananas",
    "Pears"
  ];

  var randomItem1 = myArray[Math.floor(Math.random()*myArray.length)];
  var randomItem2 = myArray[Math.floor(Math.random()*myArray.length)];

  document.addEventListener("DOMContentLoaded", function(event) {

    document.getElementById("randomItem1").innerHTML = randomItem1;
    document.getElementById("randomItem2").innerHTML = randomItem2;

  });
</script>

<div id = "randomItem1"> </div>
<div id = "randomItem2"> </div>

</body>

</html>

数组1输出而不是2的随机输出

2 个答案: