文章/答案/技术大牛

发布

社区首页 >问答首页 >带有results>的<div元素立即消失

问带有results>的<div元素立即消失
EN

Stack Overflow用户

提问于 2021-06-05 06:54:07

回答 1查看 36关注 0票数 1

像往常一样，这在有用的代码中运行得很好，但现在在vs studio/ chrome中，它可能会立即重新加载，所以最终的计算结果不会在页面上停留足够长的时间来查看它。我确实隐藏了这个类，但它在js中被删除了。..。preventDefault？但我不确定该从哪里阻止它。现在我只是在打字，因为它不会在没有更多单词的情况下发布我的问题。这太棒了

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>

javascript

html

preventdefault

回答 1

Stack Overflow用户

发布于 2021-06-05 08:11:23

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

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

使用

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

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67844820

复制

相似问题

问带有results>的<div元素立即消失
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有results>的<div元素立即消失EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有results>的<div元素立即消失
EN