<div element with results> 立即消失

Posted 2023-05-08

技术标签:

【中文标题】<div element with results> 立即消失【英文标题】：<div element with results> disappears instantly 【发布时间】：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 尝试在其中一个输入字段中按“输入”。 【参考方案1】：

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

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

与

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

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

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

【讨论】：

以上是关于<div element with results> 立即消失的主要内容，如果未能解决你的问题，请参考以下文章

[Javascript] Create scrollable DOM elements with Greensock

warning: ignoring return value of ‘scanf’, declared with attribute warn_unused_result [-Wunused-resu

1299. Replace Elements with Greatest Element on Right Side

如何找到这个 element with Selenium?

Leetcode1299. Replace Elements with Greatest Element on Right Side

[Vue @Component] Dynamic Vue.js Components with the component element