我拿到了一个针对JavaScript的FreeCodeCamp项目，其中我必须制作一个罗马数字转换器，但不幸的是，我有几个问题:
- 某些CSS代码不会加载，例如边距 colored颜色 和背景线性渐变 colored颜色 .
- 具有预期结果的容器并未按预期工作，我希望在用户输入后将其设置为不可见.
我想我犯了一个很大的逻辑错误，但我似乎就是找不到.
感谢您花时间审阅我的代码，英语不是我的母语，所以我希望我已经说清楚了.
以下是我到目前为止的所有代码:
const numberInput = document.getElementById("input");
const convertButton = document.getElementById("convert");
const output = document.getElementById("result");
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) {
if (number === 0) {
output.textContent = "Roman numerals do not represent zero.";
return;
}
if (isNaN(number) || number < 1 || number > 3999) {
const errorMessage = number < 1 ? "Please enter a number greater than or equal to 1." :
number > 3999 ? "Please enter a number less than or equal to 3999." :
"Please enter a valid number.";
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;
output.parentElement.style.visibility = "visible";
}
convertButton.addEventListener("click", function(event) {
event.preventDefault(); // Prevent form submission (optional)
const enteredNumber = parseInt(numberInput.value);
convertToRoman(enteredNumber);
// Clear previous output on new conversion (optional):
// output.textContent = ""; // Uncomment if you prefer to clear the output
});html {
height: 100%;
width: 100%;
}
body {
margin: 0;
padding: 0;
font-family: Rubik, Robot, open sans, sans-serif;
background-color: linear-gradient(to top right, #00AAFF, #00FF6C);
}
.container {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px solid black;
padding: 10px;
border-radius: 10px;
}
#numberForm {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.hidden {
visibility: invisible;
}<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>