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?

Question

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.

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>

Answer 1

Your sum object is declared twice. The second declaration overwrites the first, so the keys needed for the first calculator are lost.

Answer 2

The first one throw an error because you reassigned 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 . So you should assign sum once and it should be as following:

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>

Answer 3

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>