I did the roman numeral converter project and it works on freeCodeCamp but when I use it in visual studio’s it doesn’t work correctly. Any help would be appreciated. Also when I test this on other sites it gives me this error code “Cannot read properties of null (reading ‘addEventListener’)”
The main problem I have in visual studio’s when running this code is when I put in numbers to convert a roman numeral the numbers and results disappear quickly. On freeCodeCamp they stay on the screen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" initial-scale="1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Roman Numeral Converter</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main>
<h1>ROMAN NUMERAL CONVERTER</h1>
<form class="form">
<fieldset>
<label class="label">Enter a number:</label>
<input class="number-input" type="number" id="number"></input>
<button class="convert" id="convert-btn">Convert</button>
</fieldset>
</form>
<div id="output"></div>
</main>
<script src="script.js"></script>
</body>
</html>
** end of undefined **
** start of undefined **
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: grey;
min-height: 100vh;
flex-direction: column;
font-size: 18px;
display: flex;
padding: 50px 20px;
}
h1 {
text-align: center;
margin: 20px auto;
max-width: 350px;
}
label {
display: inline-block;
margin-bottom: 10px;
font-size: 1.5rem;
font-weight: bold;
}
button {
margin: 10px auto;
cursor: pointer;
font-size: 23px;
padding: 10px 10px;
border: 3px solid #feac32;
text-decoration: none;
background-image: linear-gradient(#fecc4c, #ffac33);
}
.number-input {
display: block;
width: 100%;
height: 60px;
margin: 10px 0;
font-size: 2.5rem;
}
fieldset {
height: 100%;
padding: 25px;
margin: 10px 20px;
border: 0 none;
}
main {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
form {
margin: auto 25px;
padding: 15px auto;
border: 3px solid;
text-align: center;
width: 90%;
max-width: 500px;
}
#output {
border: 3px solid ;
font-size: 2.5rem;
width: 90%;
max-width: 500px;
min-height: 55px;
margin-top: 25px;
padding: 15px;
overflow-wrap: break-word;
text-align: center;
}
** end of undefined **
** start of undefined **
const input = document.getElementById("number")
const convertBtn = document.getElementById("convert-btn")
const output = document.getElementById("output")
let numeralRoman = ""
const romanNumeral = [
{
input: 1000,
numeral: "M",
},
{
input: 900,
numeral: "CM",
},
{
input: 500,
numeral: "D",
},
{
input: 400,
numeral: "CD",
},
{
input: 100,
numeral: "C",
},
{
input: 90,
numeral: "XC",
},
{
input: 50,
numeral: "L"
},
{
input: 40,
numeral: "XL",
},
{
input: 10,
numeral: "X",
},
{
input: 9,
numeral: "IX",
},
{
input: 5,
numeral: "V",
},
{
input: 4,
numeral: "IV",
},
{
input: 1,
numeral: "I",
},
];
convertBtn.addEventListener('click', () => {
if (input.value === "") {
output.innerText = "Please enter a valid number"
return
} else if (input.value < 0) {
output.innerText = "Please enter a number greater than or equal to 1"
return
} else if (input.value > 3999) {
output.innerText = "Please enter a number less than or equal to 3999"
return
}
toRoman(input.value);
output.innerText = numeralRoman;
})
const toRoman = (input) => {
let result = "";
let remaining = input;
for (const { input, numeral } of romanNumeral) {
while (remaining >= input) {
result += numeral;
remaining -= input;
}
}
numeralRoman = result;
};