Sorry for posting something like this but I can’t solve this for hours now and became frustrated.
I have a function which works perfectly but I want to output the result in the DOM and can’t find a way to do it.
Could you help me? This is the JS code:
const input = document.querySelector("#number");
const output = document.querySelector("#output");
const convertToRoman = (number) => {
let romanNumbers = {
M: 1000,
CM: 900,
D: 500,
CD: 400,
C: 100,
XC: 90,
L: 50,
XL: 40,
X: 10,
IX: 9,
V: 5,
IV: 4,
I: 1,
};
let roman = "";
for (let key in romanNumbers) {
while (number >= romanNumbers[key]) {
roman += key;
number -= romanNumbers[key];
}
}
return roman;
};
input.addEventListener("keyup", convertToRoman);
output.innerHTML = convertToRoman(input.value);
output is the p tag which should display the Roman number while input is the text input field (actually number) where user can enter arabic number. With this version I don’t get any error but I also don’t see any output on my page…
the function you call here needs to be the one that changes the page as you want. convertToRoman does not have any DOM manipulation inside so nothing happens
Still doesn’t work unfortunately
First I was getting ‘Uncaught TypeError: Cannot read property ‘value’ of null’ and after I changed getElementById to a querySelector I am getting ‘Uncaught TypeError: input.addEventListener is not a function’
When I do something like this, I can see what I am typing to number field on the page. But after I change output.innerHTML = input.value; to output.innerHTML = roman; nothing happens.