时间戳

首页 > 解决方案 > 动态计算 2 个输入的总和 - Javascript

javascript - 动态计算 2 个输入的总和 - Javascript

问题描述

我有 2 个简单的输入和一个应该显示总和的 div：

我希望结果是动态的，所以每次我更改数字时，结果都会更新。

我尝试设置一个数组let numbers = []，并在更改后推送数据。但它会推送新数据，而不是或删除它。

let ssP = document.getElementById('ss-p')
let pc = document.getElementById('pc')
let rc1 = document.getElementById('rc1')

let numbers = []

ssP.addEventListener('change', () => {
    numbers.push(ssP.value)
    console.log(numbers)
})

pc.addEventListener('change', () => {
    numbers.push(pc.value)
    console.log(numbers)
})
<div>
   <label for="ss-p">Remboursement de la sécurité sociale (en %) :</label>
   <input type="text" id="ss-p" name="ss-p">
</div>

<div>
   <label for="pc">Prix de la consultation (en €) :</label>
   <input type="text" id="pc" name="pc">
</div>

<div>
   <p for="rc1">Reste à charge (100%) :</p>
   <div id="rc1"></div>
</div>

有什么帮助吗？

标签： javascripthtmlcalculator

解决方案

试试这个

<html>
       <head>
       <script>
     function calculateSum(){
     var val_1 = parseInt(document.getElementById("ss-p").value===""?0:document.getElementById("ss-p").value);
     var val_2 = parseInt(document.getElementById("pc").value===""?0:document.getElementById("pc").value);
        document.getElementById("rc1").innerText = val_1 + val_2;
     }
        
       </script>
       </head>
       <body onload="onload();">
            <div>
   <label for="ss-p">Remboursement de la sécurité sociale (en %) :</label>
   <input type="text" id="ss-p" name="ss-p"  onkeyup="calculateSum()">
</div>

<div>
   <label for="pc">Prix de la consultation (en €) :</label>
   <input type="text" id="pc" name="pc" onkeyup="calculateSum()">
</div>

<div>
   <p for="rc1">Reste à charge (100%) :</p>
   <div id="rc1"></div>
</div>
       </body>
  </html>

推荐阅读