从数组中生成随机事实[重复]答案

【问题标题】：Generate random fact from an array [duplicate]从数组中生成随机事实[重复]
【发布时间】：2023-03-30 06:54:01
【问题描述】：

我正在尝试制作一个随机事实生成器网站，该网站会从数组中生成一些随机事实，这就是我期望它的工作方式 - 首先我创建了一个按钮，单击该按钮会生成一个随机事实，但不幸的是该按钮是不工作。请检查下面的代码并告诉我我犯的错误。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Facts generator website</title>
</head>
<body>
    <div id="container">
        
         <button id="btn" onclick="generateFacts()">Click me!</button>
         <div id="here">

         </div>
    </div>
<script>
    var facts = ["I will add more facts later" , 'Heaven']
    var randomFact = randomlist(facts);
    function generateFacts(){
        getElementById('here').innerHTML = randomFact;
    }
    function randomlist(list){
        var x = Math.floor(Math.random() * list.length);
        return list[x];
    }
</script>
</body>
</html>

【问题讨论】：

这能回答你的问题吗？ Why am I getting "ReferenceError: getElementById is not defined"?

标签： javascript html css

【解决方案1】：

没有单独称为getElementById 的函数。您需要使用document 对象内部的方法。所以，函数将是document.getElementById()

var facts = ["I will add more facts later", 'Heaven']
var randomFact = randomlist(facts);

function generateFacts() {
  document.getElementById('here').innerHTML = randomFact;
}

function randomlist(list) {
  var x = Math.floor(Math.random() * list.length);
  return list[x];
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Facts generator website</title>
</head>

<body>
  <div id="container">

    <button id="btn" onclick="generateFacts()">Click me!</button>
    <div id="here">

    </div>
  </div>

</body>

</html>

【讨论】：

我要添加到这个答案的另一件事是，您可能应该在 generateFacts 函数范围内声明 randomFact 变量。这样你每次点击按钮都会得到一个新的随机事实：function generateFacts() { var randomFact = randomlist(facts); document.getElementById('here').innerHTML = randomFact; }

【解决方案2】：

document.getElementById()怎么样？

function generateFacts(){
    document.getElementById('here').innerHTML = randomFact;
}

【讨论】：

【解决方案3】：

如果您打开开发者控制台，您应该会看到指出错误的错误：

getElementById 函数没有定义。

所以函数 generateFacts 应该是这样的：

function generateFacts(){
    document.getElementById('here').innerHTML = randomFact;
}

document 是页面所有 DOM 元素的所有者。所以你应该调用它来帮助你找到元素。

【讨论】：

非常感谢！我只是编程新手，知识不多。