W3 modal closes automatically after executing an onclick JavaScript

Question

I have created a W3 modal which encompasses a JavaScript picture framing calculator. The problem I'm running into is that while the calculator works - the result only stays visible for a split second, then the modal automatically closes.

I've attempted F12 tools, but the error clears in a split second when the modal closes so I can't see it unless I'm missing something.

Here's my code, and you can enter the following into the calculator to test it:

Frame Width = 16
Frame Height = 20
Picture Width = 11
Picture Height = 17
Bottom Mat = 1

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 bottomMat = document.getElementById('bottomMat').value
  bottomMat = parseInt(bottomMat)

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

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

  var widthdoubletop = ((frameHeight + frameHeightFraction) - (pictureHeight + pictureHeightFraction)) / 2;
  var heightdoubletop = ((frameWidth + frameWidthFraction) - (pictureWidth + pictureWidthFraction)) / 2;
  var widthdoublebottom = ((frameHeight + frameHeightFraction) - (pictureHeight + pictureHeightFraction)) / (2) + (bottomMat + bottomMatFraction);
  var heightdoublebottom = ((frameWidth + frameWidthFraction) - (pictureWidth + pictureWidthFraction)) / (2) + (bottomMat + bottomMatFraction);

  document.getElementById('widthdoubletop').innerHTML = new Fraction(widthdoubletop).toString() + '"';
  document.getElementById('heightdoubletop').innerHTML = new Fraction(heightdoubletop).toString() + '"';
  document.getElementById('widthdoublebottom').innerHTML = new Fraction(widthdoublebottom).toString() + '"';
  document.getElementById('heightdoublebottom').innerHTML = new Fraction(heightdoublebottom).toString() + '"';

  return false;

}

function resetOutput() {
  document.getElementById('widthdoubletop').innerHTML = ""
  document.getElementById('heightdoubletop').innerHTML = ""
  document.getElementById('widthdoublebottom').innerHTML = ""
  document.getElementById('heightdoublebottom').innerHTML = ""
}

.square-container-double {
  display: flex;
  flex-wrap: wrap;
}

.square-double {
  position: relative;
  flex-basis: calc(50% - 10px);
  margin: 5px;
  margin-bottom: 40px;
  border: 5px solid;
  box-sizing: border-box;
  background-color: gray;
}

.square-double::before {
  content: '';
  display: block;
  padding-top: 100%;
}

.square-double .content-double {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: inline-block;
  justify-content: right;
  align-items: top;
}





  I Was Framed


      
        ×
        Double Mat


          

            Frame Width
            
            
                          
                      
          

          
            Frame Height
            
            
                          
                      
          

          
            Picture Width
            
            
                          
                      
          

          
            Picture Height
            
            
                          
                      
          

          
            Bottom Mat
            
            
                          
                      
          

          
          
          
          Need help?

As you can see - after you click Calculate - the JavaScript executes, but then the modal instantly closes

Can someone provide some guidance as to why my modal automatically closes when my JavaScript is executed?

W3 modal closes automatically after executing an onclick JavaScript

0 Answers