我有这两个吨位计算器。 第一个工作得很好。 我该如何修复第二个？ 我的 Javascript 有问题吗？

Question

我还想是否可以将值打印在屏幕上而不是显示为警报。 由于某种原因，当我在屏幕上只有 1 个计算器时，我的代码正在工作，但是当我尝试添加第二个计算器并稍微修改 javascript 时，第二个计算器也能正常工作，两者都停止工作。

谢谢！

 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); }) }) sum = { "al1": 12, "mm1": 20, "hm1": 30, } let val1; window.addEventListener("load", function() { // when page loads document.getElementById("tensile1").addEventListener("click", function(g) { var tgt1 = g.target; // what was clicked if (tgt1.name == "size") { // is it one of the radios? val1 = tgt1.value; // save the value once (DRY principle) } }) $('.ck1').click(function() { var a1 = parseFloat($('.n3').val()); var b1 = parseFloat($('.n4').val()); var c1 = parseFloat($('.m2').val()); var z1 = 3.14; var d1 = a1 * b1 * z1 * sum[val1]; alert(d1); }) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <h1>ROUND HOLE</h1> 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" /> </div> <div> <h1>RECTANGLE HOLE</h1> Length<input type="text" class="n3" /><br /> width<input type="text" class="n4" /><br /> Metal Thickness<input type="text" class="m2" /><br /> <h3> Select Metal </h3> <form id="tensile1"> <input type="radio" name="size" value="al1">Alum <br> <input type="radio" name="size" value="mm1">Mild Metal<br> <input type="radio" name="size" value="hm1"> Heavy Metal<br> <br> </form> <hr /> <input type="button" value="Add" class="ck1" /> </div>

Answer 1

您的sum object 被声明了两次。 第二个声明覆盖了第一个声明，因此第一个计算器所需的键丢失了。

Answer 2

第一个抛出错误，因为您重新分配了sum 。 例如，第一个查找al键的值，但由于您重新分配了它，所以不再存在al1 。 所以你应该分配一次sum ，它应该如下：

let sum = {
  "al": 12,
  "mm": 20,
  "hm": 30,
  "al1": 12,
  "mm1": 20,
  "hm1": 30,
}

这是工作示例：

 let sum = { "al": 12, "mm": 20, "hm": 30, "al1": 12, "mm1": 20, "hm1": 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); }) }) let val1; window.addEventListener("load", function() { // when page loads document.getElementById("tensile1").addEventListener("click", function(g) { var tgt1 = g.target; // what was clicked if (tgt1.name == "size") { // is it one of the radios? val1 = tgt1.value; // save the value once (DRY principle) } }) $('.ck1').click(function() { var a1 = parseFloat($('.n3').val()); var b1 = parseFloat($('.n4').val()); var c1 = parseFloat($('.m2').val()); var z1 = 3.14; var d1 = a1 * b1 * c1 * z1 * sum[val1]; alert(d1); }) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <h1>ROUND HOLE</h1> 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" /> </div> <div> <h1>RECTANGLE HOLE</h1> Length<input type="text" class="n3" /><br /> width<input type="text" class="n4" /><br /> Metal Thickness<input type="text" class="m2" /><br /> <h3> Select Metal </h3> <form id="tensile1"> <input type="radio" name="size" value="al1">Alum <br> <input type="radio" name="size" value="mm1">Mild Metal<br> <input type="radio" name="size" value="hm1"> Heavy Metal<br> <br> </form> <hr /> <input type="button" value="Add" class="ck1" /> </div>

Answer 3

编码的正确方法（恕我直言）：

 const myForm = document.forms['my-form'], sDigits = new Intl.NumberFormat('en-US', { maximumFractionDigits: 4, minimumFractionDigits: 2 }), Metal = { al: 12, mm: 20, hm: 30 }; myForm['bt-control-round'].onclick = () => { let val = myForm['diameter-round'].valueAsNumber * myForm['thickness-round'].valueAsNumber * 3.14 * Metal[ myForm['metal-round'].value ]; // alert( `round hole:\n ${val.toFixed(4)}` ) myForm['out-control-round'].value = isNaN(val)? 'bad entrie(s)': sDigits.format(val) } myForm['bt-control-rect'].onclick = () => { let val = myForm['length-rect'].valueAsNumber * myForm['width-rect'].valueAsNumber * myForm['thickness-rect'].valueAsNumber // * 3.14 * Metal[ myForm['metal-rect'].value ]; // alert( `rectangle hole:\n ${val.toFixed(4)}` ) myForm['out-control-rect'].value = isNaN(val)? 'bad entrie(s)': sDigits.format(val) } myForm.onsubmit = evt => { evt.preventDefault() } // disable submit

 form { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 14px; } form legend { text-transform: capitalize; padding: 0 1em; } form fieldset { margin-top: 1em; width: 20em; } form.backLine, form.backLinePlus, form.backLinePlus * { display: block; float: left; clear: both; } form label.cVal { margin-top: .7em; } form label.cVal span { font-size: .9em; padding-right: .2em; font-weight: bold; } form h5 { margin: 1em 0.2em 0; } form label.cCheck input { vertical-align: text-bottom; } form output { font-size: 1.4em; font-weight: bold; text-align: center; background: lightblue; padding: .3em; box-sizing: border-box; width: 100%; margin: .3em 0; }

 <form name="my-form"> <fieldset> <legend>round hole</legend> <label class="backLinePlus cVal"> <span>Diameter:</span> <input name="diameter-round" type="number" value="0" min="0" step="any" > </label> <label class="backLinePlus cVal"> <span>Metal Thickness:</span> <input name="thickness-round" type="number" value="0" min="0" step="any" > </label> <h5 class="backLine">Select Metal</h5> <label class=" cCheck backLine"> <input name="metal-round" value="al" type="radio" checked > <span>Alum</span> </label> <label class="cCheck backLine"> <input name="metal-round" value="mm" type="radio" > <span>Mild Metal</span> </label> <label class="cCheck backLine"> <input name="metal-round" value="hm" type="radio" > <span>Heavy Metal</span> </label> <h5 class="backLine"> </h5> <button type="button" name="bt-control-round" class="backLine">⚙ calc</button> <output name="out-control-round" class="backLine">...</output> </fieldset> <fieldset> <legend>rectangle hole</legend> <label class="backLinePlus cVal"> <span>length:</span> <input name="length-rect" type="number" value="0" min="0" step="any"> </label> <label class="backLinePlus cVal"> <span>width:</span> <input name="width-rect" type="number" value="0" min="0" step="any" > </label> <label class="backLinePlus cVal"> <span>Metal Thickness:</span> <input name="thickness-rect" type="number" value="0" min="0" step="any" > </label> <h5 class="backLine">Select Metal</h5> <label class=" cCheck backLine"> <input name="metal-rect" value="al" type="radio" checked > <span>Alum</span> </label> <label class="cCheck backLine"> <input name="metal-rect" value="mm" type="radio" > <span>Mild Metal</span> </label> <label class="cCheck backLine"> <input name="metal-rect" value="hm" type="radio" > <span>Heavy Metal</span> </label> <h5 class="backLine"> </h5> <button type="button" name="bt-control-rect" class="backLine">❏ calc</button> <output name="out-control-rect" class="backLine">...</output> </fieldset> </form>