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

时间:2018-07-07 20:29:05

标签: javascript

我想输出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>

2 个答案:

答案 0 :(得分: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)

答案 1 :(得分:1)

有两件事是错的:

  1. document.body.innerHTML = randomItem1;将覆盖现有元素

  2. 更新至例如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>