我想输出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>
答案 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)
有两件事是错的:
document.body.innerHTML = randomItem1;
将覆盖现有元素
更新至例如document.getElementById("randomItem1").innerHTML = randomItem1;
,<script>
块需要放置在元素之后 ,否则将不会发现它们没有被解析并加载到DOM中。
<!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>