时间戳

首页 > 解决方案 > 例如，当我选择明矾时，它会存储它，然后当我选择温和金属时，它会显示两个值（在完成所有计算之后）

javascript - 例如，当我选择明矾时，它会存储它，然后当我选择温和金属时，它会显示两个值（在完成所有计算之后）

问题描述

sum = {
  "al": 12,
  "mm": 20,
  "hm": 30,
}

window.addEventListener("load", function() { // when page loads
    document.getElementById("tensile").addEventListener("click", function(e) { 
        var tgt = e.target; // what was clicked
        if (tgt.name == "size") { // is it one of the radios?
            var val = tgt.value; // save the value once (DRY principle)
  
            $('.ck').click(function(){
                var a = parseFloat($('.n1').val());
                var b = parseFloat($('.n2').val());
                var z = 3.14;
                var c = a * b * z * sum[val];
                alert(c);
            })
        }
    })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Diameter<input type="text" class="n1" /><br />
Metal Thickness<input type="text" class="n2" /><br />

<h3> Select Metal </h3>
<form id="tensile">
  <input type="radio" name="size" value="al">Alum
  <br>
  <input type="radio" name="size" value="mm">Mild Metal<br>
  <input type="radio" name="size" value="hm"> Heavy Metal<br>
  <br>
</form>
<hr />

<input type="button" value="Add" class="ck" />

标签： javascript

解决方案

改变这个，它会工作：

你得到前一个计算和第二个计算的原因是因为每次单击单选按钮时都会创建一个新event listener按钮add，所以当你单击它时，两个处理程序正在运行，这就是你得到 2 个警报的原因。拉出按钮的事件侦听add器，您将只有一个处理程序：

sum = {
  "al": 12,
  "mm": 20,
  "hm": 30,
}
let val;
window.addEventListener("load", function() { // when page loads  
  document.getElementById("tensile").addEventListener("click", function(e) {
    var tgt = e.target; // what was clicked
    if (tgt.name == "size") { // is it one of the radios?
      val = tgt.value; // save the value once (DRY principle) 
    }
  })

  $('.ck').click(function() {
    var a = parseFloat($('.n1').val());
    var b = parseFloat($('.n2').val());
    var z = 3.14;
    var c = a * b * z * sum[val];
    alert(c);
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Diameter<input type="text" class="n1" /><br /> Metal Thickness<input type="text" class="n2" /><br />

<h3> Select Metal </h3>
<form id="tensile">
  <input type="radio" name="size" value="al">Alum
  <br>
  <input type="radio" name="size" value="mm">Mild Metal<br>
  <input type="radio" name="size" value="hm"> Heavy Metal<br>
  <br>
</form>
<hr />

<input type="button" value="Add" class="ck" />

推荐阅读