How to Display Output?

JavaScript
1

I completed the JavaScript Algorithms and Data Structures course last month, and I’m working through the Front End course at the moment.

As I’ve been learning, I’m trying different ‘play-around’ projects to try out different JS features and put code into workable apps.

So I thought I’d take the roman numeral calculation function that I wrote for the JS Algorithms and Data Structures course and make an interactive webpage for it.

What do I need to do to make the output of the function display somewhere on the page, though?

Thanks in advance, if anyone can provide some advice. Here’s the code so far:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="style.css" rel="stylesheet" type="text/css" />
  <title>Roman Numeral Calculator Webpage</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>


<body>
  <div class="container-fluid main_container">
    <div class="row" style="background-color: goldenrod; ">
      <div class="col-md-4 col-md-offset-4">
        <div class="jumbotron">
          <h1 class="display-4" style="text-align: center;">Roman Numeral Calculator</h1>
          <p class="lead" style="text-align: center;">To convert a number to its Roman numeral, please enter in the box
            below</p>
          <hr class="my-4">
          <p>Only decimal numerals will be converted to Roman numerals</p>
          <form class="form-inline">
            <input type="text" class="form-control" id="decimal_numeral" placeholder="Enter Numeral" />
            <button type="button" class="btn btn-primary" onclick="convertToRoman()">Convert</button>
            <div>
              <p id="roman_numeral">
                <script src="script.js">
                    let num = document.getElementById("decimal_numeral").value;
                  // convertToRoman(num);
                  document.getElementById("roman_numeral").innerHTML = convertToRoman(num);
                </script>
              </p>
            </div>
        </div>

</body>

</html>

function convertToRoman(num) {

  const romanNumerals = ['M', 'CM', 'D', 'CD', 'C', 'XC', 'L', 'XL', 'X', 'IX', 'V', 'IV', 'I'];
  const arabicNumerals = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];
  let correspondingNumeral = [];

  for (let i = 0; i < 13; i++) {
    while (num >= arabicNumerals[i]) {
      correspondingNumeral.push(romanNumerals[i])
      num -= arabicNumerals[i];
    }

  }
  let romnum = correspondingNumeral.join("");
  return romnum;

}

html {
  height: 100%;
  width: 100%;
}

#roman_numeral {
  border-color: black;
  border-style: solid;
  border-radius: 100;
  border-width: 1px;
  height: 2em;
}
2

Hello!

Have you tried a code editor like Visual Studio Code?

With VSC you a can install the Live Server add-on, click “Go live” with the HTML page selected and your app opens in a browser.

That’s how I understand your question, it’s not quite clear what you mean with “display”?

3

Your code has to either be inside the script file or the script element, not both.

I would avoid inline JS and do it all inside the script file. Put all the DOM code inside the convertToRoman handler, get the input at the top of the function, and instead of returning the value set the innerHTML to the value.

3 Likes
4

We just launched the new JS curriculum on freeCodeCamp today, that answers your question :smiley:

If you go through the first project, then you will get your answer

2 Likes
5

Thanks, that’s very timely :slight_smile:

3 Likes
6

I’ll give it a go, then

2 Likes
7

Hi lasjorg,

Could you give me an example? I’ve tried to do what you’ve suggested, but I must be doing something wrong.

e.g. I have tried a variety of things after reading through some developer pages that introduce innerHTML. For instance, this is what I have just tried:

  let romnum = correspondingNumeral.join("");
  let x = document.getElementById("roman_numeral");
  x.innerHTML = romnum;

In addition, I’m working through the first project in the new JS Algorithms and Data course, although I haven’t gotten to the part yet where it deals with displaying a calculated number on the screen.

8

After working through the first project in the new JS Data and Algorithms course, I’ve changed a few things now in the code, but I can’t quite get it to work yet…

This is what I have so far, if anyone could kindly help. I have added a small function to change the text of the button, purely to test out the features of innerText and onclick with a simpler function. That works, but I still can’t manage to display the roman numeral in the text box at the bottom.

....................
<body>
  <div class="container-fluid main_container">
    <div class="row" style="background-color: goldenrod; ">
      <div class="col-md-4 col-md-offset-4">
        <div class="jumbotron">
          <h1 class="display-4" style="text-align: center;">Roman Numeral Calculator</h1>
          <p class="lead" style="text-align: center;">To convert a number to its Roman numeral, please enter in the box
            below</p>
          <hr class="my-4">
          <p>Only decimal numerals will be converted to Roman numerals</p>
          <form class="form-inline">
            <input type="text" class="form-control" id="decimal_numeral" placeholder="Enter Numeral" />
            <button id="button" type="button" class="btn btn-primary">Convert</button>
            <div>
              <p id="roman_numeral">
                <span id="RNum">Roman Numeral</span>
              </p>
            </div>
        </div>
<script src="script.js">
</script>
</body>

</html>

const num = document.querySelector("#decimal_numeral").value;
const button = document.querySelector('#button');
button.onclick = convertToRoman;
button.onclick = quickFunc;

function quickFunc() {
  button.innerText = "New";
}

function convertToRoman(num) {
  const romanNumerals = ['M', 'CM', 'D', 'CD', 'C', 'XC', 'L', 'XL', 'X', 'IX', 'V', 'IV', 'I'];
  const arabicNumerals = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];
  let correspondingNumeral = [];

  for (let i = 0; i < 13; i++) {
    while (num >= arabicNumerals[i]) {
      correspondingNumeral.push(romanNumerals[i])
      num -= arabicNumerals[i];
    }

  }
  let romnum = correspondingNumeral.join("");
  
  const outputRomanNumeral = document.querySelector('#roman_numeral');
  outputRomanNumeral.innerText = romnum;
}
1 Like
9

  1. If you add the num parameter to the function it has to be passed an argument. Otherwise, num will be undefined inside the function. You won’t be passing it an argument so remove the parameter.

  2. You have to get the user input inside the function so you can get the value when the button is clicked and not just the initial value when the page loads. You can keep the element selector outside the function to “cache” it and get the value inside the function.

// cache the element
const inputElement = document.querySelector("#decimal_numeral");

function convertToRoman() {
  // get the element value
  let num = inputElement.value;
  // other code
}
10

Sorry for the late reply, I came down with flu over the weekend.

Thanks, I’ve been able to get it work. Finally!

11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.