Question

我正在通过以下示例练习JavaScript，但遇到了问题。

我希望“此文本不显示”与随机选择的数组项一起显示。不幸的是，只有随机选择的数组项出现，而在浏览器中打开它时，“此文本不会显示”也不会出现。该初学者的问题将如何解决？

谢谢。

<!DOCTYPE html>
<html>

<body>

This text does not show

</body>

<script>
var myArray = [
  "Apple",
  "Bananas",
  "Pears"
];

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

document.body.innerHTML = randomItem;
</script>

</html>

Answer 1

您想要将随机选择的项目附加到innerHTML。像这样：

<!DOCTYPE html>
<html>

<body>

This text does not show

</body>

<script>
var myArray = [
  "Apple",
  "Bananas",
  "Pears"
];

var randomItem = myArray[Math.floor(Math.random()*myArray.length)];

document.body.innerHTML += randomItem;
</script>

</html>

Answer 2

您要替换文档的内部html，而不是附加到文档中：

var myArray = [
  "Apple",
  "Bananas",
  "Pears"
];

var randomItem = myArray[Math.floor(Math.random()*myArray.length)];

document.body.innerHTML = document.body.innerHTML + randomItem;

This text does not show

Answer 3

将document.body.innerHTML = randomItem 更改为：

document.body.innerHTML = document.body.innerHTML + randomItem

此document.body.innerHTML = randomItem将整个body替换为随机项。

另一方面，此document.body.innerHTML = document.body.innerHTML + randomItem将整个body替换为其先前的值 plus 随机项。

var myArray = [
  "Apple",
  "Bananas",
  "Pears"
];

var randomItem = myArray[Math.floor(Math.random() * myArray.length)];

document.body.innerHTML = document.body.innerHTML + randomItem;

This text does not show

Answer 4

您必须连接字符串

document.body.innerHTML += randomItem;

Answer 5

除了HTML格式上的语法错误外，您仅看到randomItem而不是“此文本未显示”的原因是因为您正在用innerHTML覆盖正文内容。

考虑使用randomItem方法将appendChild()作为DOM元素附加为子元素。

激活javascript后，文本消失

5 个答案: