FreeCodeCamp罗马数字转换器：CSS样式失效与Div显隐异常求助

问题1：CSS代码未生效的修复 #

背景渐变不生效 #

body中使用background-color设置渐变是错误的，渐变属于背景图像属性，应改为background：

body {
  margin: 0;
  padding: 0;
  font-family: Rubik, Robot, open sans, sans-serif;
  background: linear-gradient(to top right, #00AAFF, #00FF6C); /* 替换background-color */
}

"margin颜色"设置错误 #

margin属性无法设置边框样式和颜色，你想要的应该是容器边框，把margin: 10px solid black改为border: 10px solid black，同时可添加外部间距优化布局：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 10px solid black; /* 替换margin */
  padding: 10px;
  border-radius: 10px;
  margin: 10px auto; /* 添加外部上下间距+水平居中 */
  width: 80%;
  max-width: 500px;
}

表单布局不生效 #

#numberForm的flex属性未生效，因为form元素默认不是flex布局，需要添加display: flex，同时补充间距优化：

#numberForm {
  display: flex; /* 新增 */
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
}

#numberForm div {
  display: flex;
  gap: 5px;
}

问题2：结果容器显示逻辑错误修复 #

当前代码中output.parentElement指向的是<p>标签，而非目标结果容器#result-container，导致无法正确控制显示。修复如下：

1. 直接获取结果容器元素
2. 用切换hidden类的方式控制显示，比直接修改style更规范
3. 错误场景下也显示容器，确保错误信息可见

修改后的JS代码：

const numberInput = document.getElementById("input");
const convertButton = document.getElementById("convert");
const output = document.getElementById("result");
const resultContainer = document.getElementById("result-container"); // 新增：获取结果容器

const romanNumbers = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];
const romanLetters = ["M", "CM", "D", "CD", "C", "XC", "L", "XL", "X", "IX", "V", "IV", "I"];

function convertToRoman(number) {
  // 先显示结果容器
  resultContainer.classList.remove('hidden');

  if (number === 0) {
    output.textContent = "罗马数字不表示零。";
    return;
  }

  if (isNaN(number) || number < 1 || number > 3999) {
    const errorMessage = number < 1 ? "请输入大于或等于1的数字。" :
      number > 3999 ? "请输入小于或等于3999的数字。" :
      "请输入有效的数字。";
    output.textContent = errorMessage;
    return;
  }

  let roman = "";
  for (let i = 0; i < romanNumbers.length; i++) {
    while (number >= romanNumbers[i]) {
      roman += romanLetters[i];
      number -= romanNumbers[i];
    }
  }
  output.textContent = roman;
}

convertButton.addEventListener("click", function(event) {
  event.preventDefault();
  const enteredNumber = parseInt(numberInput.value);
  convertToRoman(enteredNumber);
});

完整修复后代码 #

HTML #

<div class="container">
  <h1>Roman Numeral Converter</h1>
  <h3>Made by Yazzine</h3>
</div>

<div class="container">
  <form id="numberForm">
    <p>Enter a number between 1 and 3999:</p>
    <div>
      <input type="number" id="input" placeholder="Your number">
      <button type="submit" id="convert">Convert</button>
    </div>
  </form>
</div>

<div class="container hidden" id="result-container">
  <p>Roman Numeral: <span id="result"></span></p>
</div>

CSS #

html {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: Rubik, Robot, open sans, sans-serif;
  background: linear-gradient(to top right, #00AAFF, #00FF6C);
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 10px solid black;
  padding: 10px;
  border-radius: 10px;
  margin: 10px auto;
  width: 80%;
  max-width: 500px;
}

#numberForm {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
}

#numberForm div {
  display: flex;
  gap: 5px;
}

.hidden {
  visibility: hidden;
}

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