How to display two identical outputs of a function

Issue

I am in the process of making a picture framing calculator. The output of this calculator is displayed as the Width and Height on a displayed rectangle. The problem I’m running into is that there’s a second rectangle which needs to display identical Width and Height when the calculator delivers its output. Here’s an example using the following user input:

  1. Frame Width: 16
  2. Frame Height: 20
  3. Picture Width: 11
  4. Picture Height: 17
  5. Mat Overlap: 1
#height {
  text-align: left;
  margin-top: 250px;
  margin-left: 4px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>I Was Framed - Calculator</title>



  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900&display=swap" rel="stylesheet">



</head>

<body>
  <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
  <script>
    //Get the button
    var mybutton = document.getElementById("myBtn");

    // When the user scrolls down 20px from the top of the document, show the button
    window.onscroll = function() {
      scrollFunction()
    };

    function scrollFunction() {
      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        mybutton.style.display = "block";
      } else {
        mybutton.style.display = "none";
      }
    }

    // When the user clicks on the button, scroll to the top of the document
    function topFunction() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    }
  </script>

  <section>

    <form id="frm1" action="index.html" onreset="resetOutput()" method="post">

      <fieldset>

        <legend>

          I Was Framed Calculator

        </legend>



        <label for="frameWidth">Frame Width:</label><input type="number" title="numbers should be in inches" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57"
          step="any" min="0" name="frameWidth" id="frameWidth">
        <select name="frameWidthFraction" id="frameWidthFraction">
          <option value="0">0</option>
          <option value="0.0625">1/16</option>
          <option value="0.0125">1/8</option>
          <option value="0.1875">3/16</option>
          <option value="0.25">1/4</option>
          <option value="0.3125">5/16</option>
          <option value="0.375">3/8</option>
          <option value="0.4375">7/16</option>
          <option value="0.50">1/2</option>
          <option value="0.5625">9/16</option>
          <option value="0.625">5/8</option>
          <option value="0.6875">11/16</option>
          <option value="0.75">3/4</option>
          <option value="0.8125">3/16</option>
          <option value="0.875">7/8</option>
          <option value="0.9375">15/16</option>
        </select>

        <label for="frameHeight">Frame Height:</label><input type="number" title="numbers should be in inches" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57"
          step="any" min="0" name="frameHeight" id="frameHeight">
        <select name="frameHeightFraction" id="frameHeightFraction">

          <option value="0">0</option>
          <option value="0.0625">1/16</option>
          <option value="0.0125">1/8</option>
          <option value="0.1875">3/16</option>
          <option value="0.25">1/4</option>
          <option value="0.3125">5/16</option>
          <option value="0.375">3/8</option>
          <option value="0.4375">7/16</option>
          <option value="0.50">1/2</option>
          <option value="0.5625">9/16</option>
          <option value="0.625">5/8</option>
          <option value="0.6875">11/16</option>
          <option value="0.75">3/4</option>
          <option value="0.8125">3/16</option>
          <option value="0.875">7/8</option>
          <option value="0.9375">15/16</option>
        </select>



        <label for="pictureWidth">Picture Width:</label><input type="number" title="numbers should be in inches" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57"
          step="any" min="0" name="pictureWidth" id="pictureWidth">
        <select name="pictureWidthFraction" id="pictureWidthFraction">

          <option value="0">0</option>
          <option value="0.0625">1/16</option>
          <option value="0.0125">1/8</option>
          <option value="0.1875">3/16</option>
          <option value="0.25">1/4</option>
          <option value="0.3125">5/16</option>
          <option value="0.375">3/8</option>
          <option value="0.4375">7/16</option>
          <option value="0.50">1/2</option>
          <option value="0.5625">9/16</option>
          <option value="0.625">5/8</option>
          <option value="0.6875">11/16</option>
          <option value="0.75">3/4</option>
          <option value="0.8125">3/16</option>
          <option value="0.875">7/8</option>
          <option value="0.9375">15/16</option>
        </select>

        <label for="pictureHeight">Picture Height:</label><input type="number" title="numbers should be in inches" onkeypress="return (event.which == 8 || event.which == 0 || event.which == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any"
          min="0" name="pictureHeight" id="pictureHeight">


        <select name="pictureHeightFraction" id="pictureHeightFraction">

          <option value="0">0</option>
          <option value="0.0625">1/16</option>
          <option value="0.0125">1/8</option>
          <option value="0.1875">3/16</option>
          <option value="0.25">1/4</option>
          <option value="0.3125">5/16</option>
          <option value="0.375">3/8</option>
          <option value="0.4375">7/16</option>
          <option value="0.50">1/2</option>
          <option value="0.5625">9/16</option>
          <option value="0.625">5/8</option>
          <option value="0.6875">11/16</option>
          <option value="0.75">3/4</option>
          <option value="0.8125">3/16</option>
          <option value="0.875">7/8</option>
          <option value="0.9375">15/16</option>
        </select><br>

        <label for="matOverlap">Mat Overlap:</label><input type="number" title="numbers should be in inches" onkeypress="(event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any"
          min="0" name="matOverlap" id="matOverlap">
        <select name="matOverlapFraction" id="matOverlapFraction">

          <option value="0">0</option>
          <option value="0.0625">1/16</option>
          <option value="0.0125">1/8</option>
          <option value="0.1875">3/16</option>
          <option value="0.25">1/4</option>
          <option value="0.3125">5/16</option>
          <option value="0.375">3/8</option>
          <option value="0.4375">7/16</option>
          <option value="0.50">1/2</option>
          <option value="0.5625">9/16</option>
          <option value="0.625">5/8</option>
          <option value="0.6875">11/16</option>
          <option value="0.75">3/4</option>
          <option value="0.8125">3/16</option>
          <option value="0.875">7/8</option>
          <option value="0.9375">15/16</option>
        </select>

        <br>


        <br>
        <br>
        <input type="reset" value="Reset">
        <input type="button" onclick="calc()" value="Calculate" name="cmdCalc" />

      </fieldset>

    </form>

  </section>

  <script src="https://iwasframed.com/calculator/fraction.js/index.js"></script>


  <script>
    function calc()

    {

      var frameWidth = document.getElementById('frameWidth').value
      frameWidth = parseInt(frameWidth)

      var frameWidthFraction = document.getElementById('frameWidthFraction').value
      frameWidthFraction = parseFloat(frameWidthFraction)

      var frameHeight = document.getElementById('frameHeight').value
      frameHeight = parseInt(frameHeight)

      var frameHeightFraction = document.getElementById('frameHeightFraction').value
      frameHeightFraction = parseFloat(frameHeightFraction)

      var pictureWidth = document.getElementById('pictureWidth').value
      pictureWidth = parseInt(pictureWidth)

      var pictureWidthFraction = document.getElementById('pictureWidthFraction').value
      pictureWidthFraction = parseFloat(pictureWidthFraction)

      var pictureHeight = document.getElementById('pictureHeight').value
      pictureHeight = parseInt(pictureHeight)

      var pictureHeightFraction = document.getElementById('pictureHeightFraction').value
      pictureHeightFraction = parseFloat(pictureHeightFraction)

      var matOverlap = document.getElementById('matOverlap').value
      matOverlap = parseInt(matOverlap)

      var matOverlapFraction = document.getElementById('matOverlapFraction').value
      matOverlapFraction = parseFloat(matOverlapFraction)

      if (isNaN(frameWidth) || isNaN(frameHeight) || isNaN(pictureWidth) || isNaN(pictureHeight) || isNaN(matOverlap)) {
        alert('All fields are required!')
        return
      }

      var width = (1 / 2) * ((frameHeight + frameHeightFraction) - (pictureHeight + pictureHeightFraction) + (matOverlap + matOverlapFraction));
      var height = (1 / 2) * ((frameWidth + frameWidthFraction) - (pictureWidth + pictureWidthFraction) + (matOverlap + matOverlapFraction));

      document.getElementById('width').innerHTML = new Fraction(width).toString() + '"';
      document.getElementById('height').innerHTML = new Fraction(height).toString() + '"';

      document.getElementById('rectangle').scrollIntoView({
        behavior: 'smooth'
      })

    }

    function resetOutput() {
      document.getElementById('width').innerHTML = ""
      document.getElementById('height').innerHTML = ""
    }
  </script>

  <div style="margin:0 auto;text-align:center;width:400px;height:50px;border:5px solid #000; margin-top: 20px; margin-bottom: 50px;padding-bottom:75%;background-color:gray" id="rectangle">
    <center>
      <div id="width"></div>
    </center>

    <div id="height"></div>
  </div>
  <p>
    <div style="margin:0 auto;text-align:center;width:400px;height:50px;border:5px solid #000; margin-top: 20px; margin-bottom: 50px;padding-bottom:75%;background-color:gray" id="rectangle">
      <center>
        <div id="width"></div>
      </center>

      <div id="height"></div>
    </div>
</body>

</html>

As you can see from code snippet above – the first rectangle correctly displays the output, but the second rectangle does not.

Can someone please provide guidance on how to get the second (bottom) rectangle to display the identical output as the first first (top) rectangle?

What I’ve done is simply use this particular piece of code twice:

<div style="margin:0 auto;text-align:center;width:400px;height:50px;border:5px solid #000; margin-top: 20px; margin-bottom: 50px;padding-bottom:75%;background-color:gray" id="rectangle">
    <center>
      <div id="width"></div>
    </center>

    <div id="height"></div>
  </div>

Solution

<div style="margin:0 auto;text-align:center;width:400px;height:50px;border:5px solid #000; margin-top: 20px; margin-bottom: 50px;padding-bottom:75%;background-color:gray" id="rectangle">
    <center>
      <div id="width"></div>
    </center>

    <div id="height"></div>
  </div>

You have given same id 2 times in your code. You can’t have same id in multiple html elements since id must be unique. You can either add class or add different id to the second div. I have added different id to both the div as width-1 and height-1 you can check it below:

#height {
  text-align: left;
  margin-top: 250px;
  margin-left: 4px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>I Was Framed - Calculator</title>



  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900&display=swap" rel="stylesheet">



</head>

<body>
  <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
  <script>
    //Get the button
    var mybutton = document.getElementById("myBtn");

    // When the user scrolls down 20px from the top of the document, show the button
    window.onscroll = function() {
      scrollFunction()
    };

    function scrollFunction() {
      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        mybutton.style.display = "block";
      } else {
        mybutton.style.display = "none";
      }
    }

    // When the user clicks on the button, scroll to the top of the document
    function topFunction() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    }
  </script>

  <section>

    <form id="frm1" action="index.html" onreset="resetOutput()" method="post">

      <fieldset>

        <legend>

          I Was Framed Calculator

        </legend>



        <label for="frameWidth">Frame Width:</label><input type="number" title="numbers should be in inches" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57"
          step="any" min="0" name="frameWidth" id="frameWidth">
        <select name="frameWidthFraction" id="frameWidthFraction">
          <option value="0">0</option>
          <option value="0.0625">1/16</option>
          <option value="0.0125">1/8</option>
          <option value="0.1875">3/16</option>
          <option value="0.25">1/4</option>
          <option value="0.3125">5/16</option>
          <option value="0.375">3/8</option>
          <option value="0.4375">7/16</option>
          <option value="0.50">1/2</option>
          <option value="0.5625">9/16</option>
          <option value="0.625">5/8</option>
          <option value="0.6875">11/16</option>
          <option value="0.75">3/4</option>
          <option value="0.8125">3/16</option>
          <option value="0.875">7/8</option>
          <option value="0.9375">15/16</option>
        </select>

        <label for="frameHeight">Frame Height:</label><input type="number" title="numbers should be in inches" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57"
          step="any" min="0" name="frameHeight" id="frameHeight">
        <select name="frameHeightFraction" id="frameHeightFraction">

          <option value="0">0</option>
          <option value="0.0625">1/16</option>
          <option value="0.0125">1/8</option>
          <option value="0.1875">3/16</option>
          <option value="0.25">1/4</option>
          <option value="0.3125">5/16</option>
          <option value="0.375">3/8</option>
          <option value="0.4375">7/16</option>
          <option value="0.50">1/2</option>
          <option value="0.5625">9/16</option>
          <option value="0.625">5/8</option>
          <option value="0.6875">11/16</option>
          <option value="0.75">3/4</option>
          <option value="0.8125">3/16</option>
          <option value="0.875">7/8</option>
          <option value="0.9375">15/16</option>
        </select>



        <label for="pictureWidth">Picture Width:</label><input type="number" title="numbers should be in inches" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57"
          step="any" min="0" name="pictureWidth" id="pictureWidth">
        <select name="pictureWidthFraction" id="pictureWidthFraction">

          <option value="0">0</option>
          <option value="0.0625">1/16</option>
          <option value="0.0125">1/8</option>
          <option value="0.1875">3/16</option>
          <option value="0.25">1/4</option>
          <option value="0.3125">5/16</option>
          <option value="0.375">3/8</option>
          <option value="0.4375">7/16</option>
          <option value="0.50">1/2</option>
          <option value="0.5625">9/16</option>
          <option value="0.625">5/8</option>
          <option value="0.6875">11/16</option>
          <option value="0.75">3/4</option>
          <option value="0.8125">3/16</option>
          <option value="0.875">7/8</option>
          <option value="0.9375">15/16</option>
        </select>

        <label for="pictureHeight">Picture Height:</label><input type="number" title="numbers should be in inches" onkeypress="return (event.which == 8 || event.which == 0 || event.which == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any"
          min="0" name="pictureHeight" id="pictureHeight">


        <select name="pictureHeightFraction" id="pictureHeightFraction">

          <option value="0">0</option>
          <option value="0.0625">1/16</option>
          <option value="0.0125">1/8</option>
          <option value="0.1875">3/16</option>
          <option value="0.25">1/4</option>
          <option value="0.3125">5/16</option>
          <option value="0.375">3/8</option>
          <option value="0.4375">7/16</option>
          <option value="0.50">1/2</option>
          <option value="0.5625">9/16</option>
          <option value="0.625">5/8</option>
          <option value="0.6875">11/16</option>
          <option value="0.75">3/4</option>
          <option value="0.8125">3/16</option>
          <option value="0.875">7/8</option>
          <option value="0.9375">15/16</option>
        </select><br>

        <label for="matOverlap">Mat Overlap:</label><input type="number" title="numbers should be in inches" onkeypress="(event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any"
          min="0" name="matOverlap" id="matOverlap">
        <select name="matOverlapFraction" id="matOverlapFraction">

          <option value="0">0</option>
          <option value="0.0625">1/16</option>
          <option value="0.0125">1/8</option>
          <option value="0.1875">3/16</option>
          <option value="0.25">1/4</option>
          <option value="0.3125">5/16</option>
          <option value="0.375">3/8</option>
          <option value="0.4375">7/16</option>
          <option value="0.50">1/2</option>
          <option value="0.5625">9/16</option>
          <option value="0.625">5/8</option>
          <option value="0.6875">11/16</option>
          <option value="0.75">3/4</option>
          <option value="0.8125">3/16</option>
          <option value="0.875">7/8</option>
          <option value="0.9375">15/16</option>
        </select>

        <br>


        <br>
        <br>
        <input type="reset" value="Reset">
        <input type="button" onclick="calc()" value="Calculate" name="cmdCalc" />

      </fieldset>

    </form>

  </section>

  <script src="https://iwasframed.com/calculator/fraction.js/index.js"></script>


  <script>
    function calc()

    {

      var frameWidth = document.getElementById('frameWidth').value
      frameWidth = parseInt(frameWidth)

      var frameWidthFraction = document.getElementById('frameWidthFraction').value
      frameWidthFraction = parseFloat(frameWidthFraction)

      var frameHeight = document.getElementById('frameHeight').value
      frameHeight = parseInt(frameHeight)

      var frameHeightFraction = document.getElementById('frameHeightFraction').value
      frameHeightFraction = parseFloat(frameHeightFraction)

      var pictureWidth = document.getElementById('pictureWidth').value
      pictureWidth = parseInt(pictureWidth)

      var pictureWidthFraction = document.getElementById('pictureWidthFraction').value
      pictureWidthFraction = parseFloat(pictureWidthFraction)

      var pictureHeight = document.getElementById('pictureHeight').value
      pictureHeight = parseInt(pictureHeight)

      var pictureHeightFraction = document.getElementById('pictureHeightFraction').value
      pictureHeightFraction = parseFloat(pictureHeightFraction)

      var matOverlap = document.getElementById('matOverlap').value
      matOverlap = parseInt(matOverlap)

      var matOverlapFraction = document.getElementById('matOverlapFraction').value
      matOverlapFraction = parseFloat(matOverlapFraction)

      if (isNaN(frameWidth) || isNaN(frameHeight) || isNaN(pictureWidth) || isNaN(pictureHeight) || isNaN(matOverlap)) {
        alert('All fields are required!')
        return
      }

      var width = (1 / 2) * ((frameHeight + frameHeightFraction) - (pictureHeight + pictureHeightFraction) + (matOverlap + matOverlapFraction));
      var height = (1 / 2) * ((frameWidth + frameWidthFraction) - (pictureWidth + pictureWidthFraction) + (matOverlap + matOverlapFraction));

      document.getElementById('width').innerHTML = new Fraction(width).toString() + '"';
      document.getElementById('height').innerHTML = new Fraction(height).toString() + '"';
      document.getElementById('width-1').innerHTML = new Fraction(width).toString() + '"';
      document.getElementById('height-1').innerHTML = new Fraction(height).toString() + '"';

      document.getElementById('rectangle').scrollIntoView({
        behavior: 'smooth'
      })

    }

    function resetOutput() {
      document.getElementById('width').innerHTML = ""
      document.getElementById('height').innerHTML = ""
      document.getElementById('width-1').innerHTML = ""
      document.getElementById('height-1').innerHTML = ""
    }
  </script>

  <div style="margin:0 auto;text-align:center;width:400px;height:50px;border:5px solid #000; margin-top: 20px; margin-bottom: 50px;padding-bottom:75%;background-color:gray" id="rectangle">
    <center>
      <div id="width"></div>
    </center>

    <div id="height"></div>
  </div>
  <p>
    <div style="margin:0 auto;text-align:center;width:400px;height:50px;border:5px solid #000; margin-top: 20px; margin-bottom: 50px;padding-bottom:75%;background-color:gray" id="rectangle">
      <center>
        <div id="width-1"></div>
      </center>

      <div id="height-1"></div>
    </div>
</body>

</html>

Answered By – Sumit Sharma

Answer Checked By – Robin (AngularFixing Admin)

Leave a Reply

Your email address will not be published.