Resetting the form fields and output of the function simultaneously

Question

I am making a picture frame calculator. Therefore, I'm creating a reset button to clear the form fields of the calculator and the output of function calc() simultaneously.

However, I'm running into a problem where my reset button is only resetting the form fields, but not the output of the function.

Here's the calculator excluding most CSS:

#height {
  text-align: left;
  margin-top: 250px;
  margin-left: 4px;
}

<section>

  <form id="frm1" action="/index.html" 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.which == 8 || event.which == 0 || event.which == 13) ? null : event.which >= 48 && event.which <= 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.which == 8 || event.which == 0 || event.which == 13) ? null : event.which >= 48 && event.which <= 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.which == 8 || event.which == 0 || event.which == 13) ? null : event.which >= 48 && event.which <= 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.which >= 48 && event.which <= 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.which == 8 || event.which == 0 || event.which == 13) ? null : event.which >= 48 && event.which <= 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" onreset="calc()" value="Reset">
      <input type="button" onclick="calc()" value="Calculate" name="cmdCalc" />

    </fieldset>

  </form>

</section>

<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 = width
    document.getElementById('height').innerHTML = height

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

  }
</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>

As you can see in the above code snippet the output is displayed on the rectangle. When the reset button is clicked - that output is not reset.

I've tried this:

<input type="reset" onreset="calc()" value="Reset">

And, onclick - but I just can't seem to get it to work. I'm unsure if I'm even on the right track.

In other words, when reset is clicked it looks incorrectly like this:

But, it should look like this:

Can someone provide some guidance on how to reset both the form fields and the output of function calc() at the same time?

Answer 1

you have to add the reset event listener to the form element:

<form ... onreset="resetOutput()">

function resetOutput(){
    document.getElementById('width').innerHTML = ""
    document.getElementById('height').innerHTML = ""
}