Output function return in the DOM

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

You pass the input as a string first convert it to a number.
First, you get the input value as a number.

const input = parseInt(document.getElementById("#number").value, 10)

another way to get input as the number is first to get as a string then converts to number using parseInt() or Number().

input.addEventListener("keyup", convertToRoman(input));

hope this works for you…
Roman Name Convertor problem: check every aspect of the problem then start building RNC.

I had something like output.innerHTML += ... in the function but I still didn’t see anything on the page. :frowning: What should I do?

Still doesn’t work unfortunately :frowning:
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’

Any help? :frowning:

const input = document.querySelector("#number");
// const input = parseInt(document.getElementById("number").value, 10);
const output = document.querySelector("#output");

const convertToRoman = () => {
  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];
    }
  }
  console.log(input.value);
  output.innerHTML = input.value;
};

input.addEventListener("keyup", convertToRoman);

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.

what’s number?

Anyway I think you need to do
something like

input.addEventListener("keyup", function() {
   output.innerHTML = convertToRoman(...)
});

oh, number should be parameter passed to the function. Now with this code I get undefined on the page, things are improving :slight_smile:

const input = document.querySelector("#number");
// const input = parseInt(document.getElementById("number").value, 10);
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];
    }
  }
  console.log(input.value);
};

input.addEventListener("keyup", function () {
  output.innerHTML = convertToRoman(input.value);
});

I never though this will turn out to be so complicated for me… still can’t figure it out, incredible.

what does your function convertToRoman return?

It returns a Roman number :smiley: for example, transforms 2000 to MM

I fixed this finally

It was missing the return statement, so no, nothing is being returned