Javascript 不显示生成的数字？（document.getElementById）[关闭]答案

【问题标题】：Javascript doesn't show a generated number? (document.getElementById) [closed]Javascript 不显示生成的数字？（document.getElementById）[关闭]
【发布时间】：2022-01-14 22:16:15
【问题描述】：

我想让 num1 和 num2 生成为 1-12 的随机数，当我运行它时，我只得到 2+2。

这是我认为我的代码有问题的地方

function generate_equation() { //generates random numbers and random equation
  var num1 = Math.floor(Math.random) * 13;
  var num2 = Math.floor(Math.random) * 13;

  var all_answers = [];
  var switch_answers = [];

  answer = num1 + num2;
  document.getElementById(num1).innerHTML = num1;
  document.getElementById(num2).innerHTML = num2;
}

<div class="equation">
  <h1 id="num1" style="padding: 0 5px">2</h1>
  <h1 id="operator" style="padding: 0 5px">+</h1>
  <h1 id="num2" style="padding: 0 5px">2</h1>
</div>

这是完整代码的链接，由于大学的某些情况，并非所有内容都已完成。 https://jsfiddle.net/LiamBox/f406mgpb/3/

【问题讨论】：

你在哪里调用你的函数？我们需要一个minimal reproducible example，它必须在这里，而不是在另一个网站上
getElementById(num1) 应该是 getElementById("num1")，Math.random 应该是 Math.random()。我会稍微慢一点，逐行一小块地工作，console.log 每一步的一切都确保它按您的预期工作，而不是一头扎进并解决多个问题。 Math.floor(Math.random() * 13) -- floor 应该包裹整个东西，否则你总是会得到 0。我推荐 How to Debug Small Programs
专业提示：如果您打开浏览器控制台，您遇到的许多问题都可以轻松调试 :) 这是一个非常有用的工具，可以找出您的脚本没有执行或抛出的原因错误，因为错误消息通常包含足够的信息来帮助您调试代码。

标签： javascript html

【解决方案1】：

您的代码存在 3 个问题：

您对Math.floor 和Math.random 的使用不太正确。调用Math.floor(Math.random) 只是将函数本身传递给floor。你可能想要Math.floor(Math.random() * 13)
您的代码都在一个不会被调用的函数中。您需要在某处调用它或将其移出函数，以便在页面加载时运行。
id 必须是一个字符串 - 您使用它的方式 num1 被解释为一个局部变量名称，由于命名不当，它包含生成的随机数。

  var num1 = Math.floor(Math.random() * 13);
  var num2 = Math.floor(Math.random() * 13);
  
 

  var all_answers = [];
  var switch_answers = [];

  answer = num1 + num2;
  document.getElementById('num1').innerHTML = num1;
  document.getElementById('num2').innerHTML = num2;

<div class="equation">
  <h1 id="num1" style="padding: 0 5px">2</h1>
  <h1 id="operator" style="padding: 0 5px">+</h1>
  <h1 id="num2" style="padding: 0 5px">2</h1>
</div>

【讨论】：

非常感谢！你是对的，我完全错了整个 Math.floor 和 Math.random。正如你所说，我会看看在页面加载时我能做些什么来调用该函数，包括将 id 命名为字符串

【解决方案2】：

此方案将 DOM 元素分配给全局变量，并使用支持函数以更好地遵循 Don't Repeat Yourself 原则。

在 sn-p 下方，您会找到如何开始调试的分步说明您的原始代码。

// Identifies some DOM elements
const
  h1_num1 = document.getElementById("num1"),
  h1_num2 = document.getElementById("num2"),
  h1_answer = document.getElementById("answer");

// Invokes main function
generate_equation();


// Defines main function
function generate_equation() { 
  
  // Generates random numbers (using supporting function), and gets their sum
  const
    num1 = randIntBelow(13),
    num2 = randIntBelow(13),
    sum = num1 + num2;

  // Populates the elements
  h1_num1.innerHTML = num1;
  h1_num2.innerHTML = num2;
  h1_answer.innerHTML = sum;
}


// Defines supporting function
function randIntBelow(limit){
  const
    rand_num_below_limit = Math.random() * limit,
    integer_part = Math.floor(rand_num_below_limit);
  return integer_part;
}

/* Using CSS to keep styling separate from structure
     makes HTML less repetetive and more maintainable */
h1{ padding: 0 5px; margin: 0; }

<div class="equation">
  <h1 id="num1"></h1>
  <h1 id="operator">+</h1>
  <h1 id="num2"></h1>
  <h1 id="equals">=</h1>
  <h1 id="answer"></h1>  
</div>

以下是您开始从原始代码到类似于上述内容的方法：

如果您在浏览器中运行代码并打开浏览器控制台，您应该会看到一条错误消息，其中包含以下信息：

Cannot set properties of null (setting 'innerHTML') ... line 26 ...,

意思是在第 26 行，您在向 JavaScript 请求 innerHTML 属性，而该属性没有此类属性（因为它是 null）。
检查指示的行，您会看到：

document.getElementById(num1).innerHTML = num1;

所以 "document.getElementById(num1)" 的计算结果必须为 null ... 这意味着 JavaScript 找不到 id 与存储在名为 num1 的变量中的值匹配的元素
如果您想了解 num1 的计算结果，您可以在脚本中添加一个像 console.log(num1); 这样的简单行并刷新您的浏览器——但在这种情况下，您可能已经在代码中看到 num1 应该包含一个随机数，而不是 id 字符串。
因此您需要更改代码以将更合适的参数传递给.getElementById()——然后刷新浏览器以查看下一条错误消息并重复此调试处理，直到没有更多的错误需要克服。

【讨论】：