Output function return in the DOM

JavaScript
#1

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…

#2

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

#3

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.

#4

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

#5

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:

#6 
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.

#7

what’s number?

Anyway I think you need to do
something like

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

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.

#9

what does your function convertToRoman return?

#10

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

#11

I fixed this finally

#12

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