Howdy,
I’ve spent my fair share of time head bashing to figure out this odd behavior.
Input 33, get the right answer
Input 32, previous answer clears and get the right answer
input 2024, previous answer clears and get the right answer
input 2022, previous answer DOES NOT clear and desired output not achieved.
I want to learn. Can someone see the bug?
SPOILER ALERT–> Code below has a workable solution for a roman numeral converter.
Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input id='number' type='text' />
<button id='convert-btn'>Convert</button>
<div id='output'></div>
<script src='script.js'></script>
</body>
</html>
const output = document.getElementById('output');
const convertBtn = document.getElementById('convert-btn');
const inputNum = document.getElementById('number');
convertBtn.addEventListener('click', () => {
let romNumeral = numToNumeral(inputNum.value, romNumTables);
output.innerHTML = `${romNumeral}`;
})
const romNumTables = [
{
0: '',
1: 'I',
2: 'II',
3: 'III',
4: 'IV',
5: 'V',
6: 'VI',
7: 'VII',
8: 'VIII',
9: 'IX'
},
{
0: '',
1: "X",
2: "XX",
3: "XXX",
4: "XL",
5: "L",
6: "LX",
7: "LXX",
8: "LXXX",
9: "XC"
},
{
0: '',
1: "C",
2: "CC",
3: "CCC",
4: "CD",
5: "D",
6: "DC",
7: "DCC",
8: "DCCC",
9: "DM"
},
{
0: '',
1: "M",
2: "MM",
3: "MMM"
}
]
const numToNumeral = (num, table) => {
let romNumeral = '';
let reversedNum = num.toString().split('').reverse();
console.log(reversedNum);
let i = 0;
while (i < reversedNum.length) {
romNumeral = table[i][reversedNum[i]] += romNumeral
i++;
}
console.log(romNumeral);
return romNumeral;
}