如何使这个HTML / Javascript随机数生成器输出多个结果

Question

提前感谢您提供的任何帮助。我有一个简单的加载随机数生成器，我遇到了问题。

基本上，我正在尝试在某些文本之间插入生成的数字。我没有运气，但似乎我已经尝试了一切。它总是在短语之间放一条线。

我的第二个问题是我无法弄清楚如何有多个随机数输出。我是 JavaScript 的新手，所以任何解释将不胜感激！

function getNumber() {
  var minNumber = 10; // The minimum number you want
  var maxNumber = 10; // The maximum number you want
  var randomnumber = Math.floor(Math.random() * (maxNumber + 1) + minNumber);
  document.getElementById("myNumber").innerHTML = randomnumber;
  // Sets content of <div> to number
  return false;
}
window.onload = getNumber;

<div id="myNumber"> </div>
<p id="yourNumber"> </p>

I am (random number) years old.
My brother is (random number) years old. 
My dog had (random number) puppies last year. 

Answer 1

我正在使用输出元素，因为它应该用于结果......我使用 querySelectorAll 来获取所有输出元素。

document.addEventListener("DOMContentLoaded", function(event) {
  function getNumber() {
    output => output.value = getNumber();
    var minNumber = 10; // The minimum number you want
    var maxNumber = 20; // The maximum number you want
    return Math.floor(Math.random() * (maxNumber + 1) + minNumber);
  }
  // Using querySelectorAll to get all output-elements, and then update the value of the output-element with a random number.
  document.querySelectorAll('output').forEach(
    output => output.value = getNumber()
  );
});

<div>I am <output name="me"></output> years old.</div>
<div>My brother is <output name="brother"></output> years old. </div>
<div>My dog had <output name="dog"></output> puppies last year. </div>

Answer 2

我会将任务分解为一个生成随机数的函数和另一个更新 DOM 的函数。

这样，您可以重复使用数字生成器

有点像这样(见演示(

// gets a random number
function getNumber() {
  var minNumber = 10; // The minimum number you want
  var maxNumber = 10; // The maximum number you want
  var randomNumber = Math.floor(Math.random() * (maxNumber + 1) + minNumber);
  return randomNumber;
}
// updates one DOM element given its id
function updateDom(id) {
  var aRandomNumber = getNumber();
  // Sets content of <div> to number
  document.getElementById(id).innerHTML = aRandomNumber;
}
// updates all DOM elements listed
function updateAll() {
  updateDom('myNumber');
  updateDom('yourNumber');
  updateDom('theirNumber');
}
// when window ready, call function
window.onload = updateAll();

<div>I am <span id='myNumber'></span> years old.</div>
<div>My brother is <span id='yourNumber'></span> years old. </div>
<div>My dog had <span id='theirNumber'></span> puppies last year. </div>

Answer 3

<div>默认与CSS display: block一起显示，这会将其放在自己的行中。您可以设置自己的自定义CSS，但我建议您改用<span>，默认情况下使用display: inline。

Answer 4

这个呢，还是你需要一个介于 10 和 10 之间的数字？10 旁边不能有 10 到 10 之间的任何数字。

function getNumber() {
  var minNumber = 10; // The minimum number you want
  var maxNumber = 10; // The maximum number you want
  var randomnumber = Math.floor(Math.random() * 100);
  document.getElementById("myNumber").innerHTML = randomnumber;
  // Sets content of <div> to number
  return false;
}
window.onload = getNumber;

<div id="myNumber"> </div>
<p id="yourNumber"> </p>