如何使用JavaScript的Math.random()在HTML p标签中插入指定范围随机数

问题原因 #

你原代码的核心问题是直接修改了#randomNum整个div的innerHTML，会直接覆盖该div内原有的h2、p标签等所有内容，所以才会出现显示位置偏移、无法插入多个随机数的情况，原有card的样式也会因为内部结构被破坏出现异常。

解决方案 #

不需要修改card类div的任何结构，只要给随机数预留位置加空span标签，再单独给这些span赋值即可，完全不会影响原有CSS样式。

修改后的HTML代码

<div class = card>
  <div id="randomNum">
    <h2>Header</h2>
    <p>stats - <span id="random1"></span> <br/> stat 2 - <span id="random2"></span> </p>
  </div>
</div>

仅把原来的[randomNumber]占位符换成了带唯一id的空span标签，其余结构完全不变。

修改后的JavaScript代码

// 封装生成随机数的通用函数，支持自定义上下限
function generateRandom(min = 1, max =5) {
  return Math.floor(Math.random() * (max + 1) + min);
}

function insertRandomNum() {
  // 分别给对应位置赋值随机数
  document.getElementById("random1").innerText = generateRandom();
  document.getElementById("random2").innerText = generateRandom();
  // 后续要加更多随机数只要新增对应span，加一行赋值代码即可
  return false;
}

window.onload = insertRandomNum;

如果需要更多随机数，只要在p标签里新增带唯一id的span，再在JS里多写一行赋值代码即可，完全不会影响原有结构和样式。

内容的提问来源于stack exchange，提问作者NotGoodAtCoding