[英]I have these 2 tonnage calculators. The first one is working great. How can I fix the second one? Is something wrong with my Javascript?
I would also like if I could have the value printed on the screen instead of showing up as an alert.我还想是否可以将值打印在屏幕上而不是显示为警报。 For some reason my code was working when I only had the 1 calculator on the screen but when I tried adding a second one and modifying the javascript a little bit so the second one works as well both stopped working.
由于某种原因,当我在屏幕上只有 1 个计算器时,我的代码正在工作,但是当我尝试添加第二个计算器并稍微修改 javascript 时,第二个计算器也能正常工作,两者都停止工作。
THANKS!谢谢!
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>
Your sum
object is declared twice.您的
sum
object 被声明了两次。 The second declaration overwrites the first, so the keys needed for the first calculator are lost.第二个声明覆盖了第一个声明,因此第一个计算器所需的键丢失了。
The first one throw an error because you reassigned sum
.第一个抛出错误,因为您重新分配了
sum
。 For instance the first one looks for the value of al
key but there isn't anymore because you reassigned it, there is al1
.例如,第一个查找
al
键的值,但由于您重新分配了它,所以不再存在al1
。 So you should assign sum
once and it should be as following:所以你应该分配一次
sum
,它应该如下:
let sum = {
"al": 12,
"mm": 20,
"hm": 30,
"al1": 12,
"mm1": 20,
"hm1": 30,
}
Here is the working example:这是工作示例:
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>
the corect way to code that (IMHO):编码的正确方法(恕我直言):
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.