<div element with results> 立即消失答案

【问题标题】：<div element with results> disappears instantly<div element with results> 立即消失
【发布时间】：2021-08-22 22:56:30
【问题描述】：

像往常一样，这在有用的 codepen 中运行良好，但现在在 vs studio/chrome 中它可能会立即重新加载，因此最终计算不会在页面上保留足够长的时间来查看它。我确实隐藏了这个类，但它在 js 中被删除了。 ... 防止默认？但我不知道在哪里可以防止它。现在我只是打字，因为它不会在没有更多文字的情况下发布我的问题。这很棒

function calculate (){
    let vehiclePrice = document.getElementById('price').value;
    let downPayment = document.getElementById('downpmt').value;
    let tradeIn = document.getElementById('trade-in').value;
    let intRate = document.getElementById('interest-rate').value;
    let loanTerm = document.getElementById('loan-term').value;
    
    amount = +vehiclePrice;
    down = +downPayment;
    trade = +tradeIn;
    r = +intRate;
    term = +loanTerm;
    amountFinanced = amount - down - trade;
    
    console.log(amount)
    
     annInterest = parseFloat(r),
        monInt = annInterest / 1200;
  
        if(!amount){
          alert('Please add a loan amount');
          return;
        }
      
       if(!term){
         term = 60;
         loanTerm =    document.getElementById('loan-term').value = 60;
       }
      
      if(!down){
        down=0;
        downPayment = document.getElementById('downpmt').value = 0;
      }
    
    
      if(!trade){
          trade = 0;
          tradeIn = document.getElementById('trade-in').value = '0';
        }
    
      if(!annInterest){
        r = 3.25;
        intRate = document.getElementById('interest-rate').value = 3.25;
      }
    
    let calculator = ((monInt + (monInt / (Math.pow((1 + monInt), term) -1))) * (amountFinanced || 0)).toFixed(2);
    
    let paymentResults = document.getElementById('results');
    paymentResults.classList.remove('hidden')
    paymentResults.innerHTML = '';
    
    let results = document.createElement('div');
    results.innerHTML = `<h1> Estimated Montly Payment:</h1> <h3> ${calculator} `
    
    paymentResults.appendChild(results);
  }

body{
    margin: 0 auto;
    background-color: whitesmoke;
  }
  
  #calculator{
      padding: 89px;
  }
  
  label{
    font-size: 19px;
    color: #666; 
  }
  
  #form{
    display: block;
    align-items:left;
    justify-items: left;
    margin-right: 500px;
    margin-left: auto;
    font-size: 18px; 
  }
  ::placeholder {
    color:red;
    font-size: 15px;
  }
  
  input[type=text] {
    display: block;
    color: red;
    width: 30em;
    padding: 9px;
    margin: 5px;
  }
  
  #btn{
    color: white;
    background: red;
    font-size: 18px;
    padding: 8px;
    border: 1px solid red;
    margin: 30px;
    box-shadow: 3px 3px 9px black;
  }
  
  #btn:hover{
    padding: 9px;
    background: #6732;
    color: #232323;
  }
  
  #results{
    padding: 16px;
    background-color: white;
    border: 1px solid red;
    box-shadow: 3px 3px 9px #232323;
    position: relative;
    left: 600px;
    width: 80%;
    bottom: 500px;
  }
  
  .hidden{
    display: none;
  }
  
  
  @media only screen and (max-width: 600px) {
    h1{
      font-size: 28px;
    }
    
    input[type=text]{
      font-size: 14px;
      width: 15em;
      padding: 3px;
    }
    #calculator {
      width: 20%;
      padding: 40px;
      
    }
    
    #results{
      position: relative;
      left: 10px;
      top: 20px;
      background-color: red;
      justify-content: center;
      align-items: left;
      align-self: left;
      margin-left: 0 auto;
      min-width: 300px !important; 
    }
  }

<head>
    <link rel='stylesheet' href=style.css>
    <script src="index.js"></script>
</head>
<div id='calculator'>
    <div='form-calculator'>
    <form id='form' action=''>
      <h1> Car Loan Calculator</h1>
      <label for='price'>Vehicle Price</label>
      <input type='text' id="price" placeholder='vehicle price'>            </input><br>
     <label for='downpmt'>Down Payment</label>
      <input type='text' id="downpmt" placeholder='down payment'> 
    </input><br>
  <label for='trade-in'>Trade in Value</label>
      <input type='text' id="trade-in" placeholder='trade-in'> 
    </input><br>
  <label for='interest-rate'>Interest Rate</label>
      <input type='text' id="interest-rate" placeholder='interest' value='3.25'>
    </input><br>
  <label for='loan-term'>Loan Term</label>
      <input type='text' id="loan-term" placeholder='ex. 60 months'> 
    </input><br>
  <button id=btn onclick='calculate();' value=calculate>Calculate</button>
  </form>
    <div>
      <div class='hidden' id='results'></div>
  </div>

【问题讨论】：

我调用了 event.preventDefault();在声明了变量并且效果很好之后。
您也可以将按钮类型设置为按钮，<button type="button" ..../> 按钮的默认类型是提交。
@RyanHartley 尝试在其中一个输入字段中按“输入”。

标签： javascript html preventdefault

【解决方案1】：

提供的代码总是在前端计算估计值。因此，防止表单提交的简单解决方案是替换

<form id='form' action=''>
  ...
</form>

与

<div id='form'>
  ...
</div>

如果您出于某种原因需要保留form 元素，那么您可以添加一个提交处理程序来防止表单提交，例如

document.querySelector('#form').addEventListener( "submit", function( event) {
    event.preventDefault();
});

【讨论】：