JS阿拉伯数字转罗马数字：如何将随机数结果展示到HTML页面？

问题梳理 #

你的代码里有几个细节错误导致页面无法正常展示：

1. DOM元素ID拼写不匹配：HTML里罗马数字的元素ID是romainInput，但JS里写成了romanIput（两处拼写错误：romain→roman，Iput→Input）
2. 属性名拼写错误：你用的innerHtml是错的，正确属性名是innerHTML（注意大小写）
3. 缺少随机数生成和页面赋值逻辑：没有生成1-10的随机数，也没把转换结果挂载到页面上

修正后的完整代码 #

HTML部分（无需修改，确认ID即可） #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Converter</title>
  </head>
  <body>
    <p>Arabic number :</p>
    <p id="numberInput"></p>

    <p>Roman number :</p>
    <p id="romainInput"></p>

    <script src="./index.js"></script>
  </body>
</html>

JS部分（修正拼写+添加随机数和赋值逻辑） #

// 修正ID拼写：和HTML里的romainInput完全对应
let romanInput = document.getElementById("romainInput");
let arabicInput = document.getElementById("numberInput");

function convertToRoman(num) {
  const romanToNum = {
    X: 10,
    IX: 9,
    V: 5,
    IV: 4,
    I: 1,
  };

  let roman = "";

  for (let key in romanToNum) {
    while (num >= romanToNum[key]) {
      roman += key;
      num -= romanToNum[key];
    }
  }
  return roman;
}

// 生成1-10的随机整数
const randomNum = Math.floor(Math.random() * 10) + 1;
// 转换为罗马数字
const romanResult = convertToRoman(randomNum);

// 用正确的innerHTML属性把结果赋值到页面元素
arabicInput.innerHTML = randomNum;
romanInput.innerHTML = romanResult;

关键修正说明 #

• ID匹配：JS获取元素时的ID必须和HTML里的完全一致，这里HTML中罗马数字容器的ID是romainInput，注意拼写不要混淆
• innerHTML拼写：必须使用大写的innerHTML，小写的innerHtml是无效属性，无法修改页面内容
• 随机数生成：Math.floor(Math.random() * 10)会生成0-9的整数，加1后刚好覆盖1-10的需求范围
• 结果赋值：直接将随机数和转换后的罗马数字通过innerHTML赋值到对应的<p>元素，页面就能自动渲染出内容

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