StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><em>Tried to run in JSFiddle and couldn't get it to work the way I want but eh might just be on my side or maybe I did something wrong</em></p> <p>What I would do: Make the button's have different ID's such as:</p> <p><code><input type = "button" id="weightCalculate" value = "calculate" onclick = "Calc(this)" /></code></p> <p>Something like so:</p> <pre><code> Select Conversion Type: <br /> <input type = "radio" id="length" name = "rad1" onclick="showSecond(this)" />Length <br /> <input type = "radio" id="weight" name = "rad1" onclick="showSecond(this)" />Weight <br /> <input type = "radio" id="volume" name = "rad1" onclick="showSecond(this)" />Volume <br /> <div id = "div" style="display:none"> Select Direction: <br /> <input type = "radio" name = "rad2" value="PG" checked="true" id="pTok"/>Pounds to Kgs <br /> <input type = "radio" name = "rad2" value="KP" id="kTop" />Kgs to Pounds <br /> Number to be converted: <input type = "text" id="weightAmount" name = "amount" /> <br /> <input type = "button" id="weightCalculate" value = "calculate" onclick = "Calc(this)" /> <br /> Result: <br /> <input type ="text" id="weightFin" name ="fin" value="" readonly="readonly"/> </div> <div id = "div1" style="display:none"> Select Direction: <br /> <input type = "radio" name = "rad3" value="FM" checked="true" id="fTom" />Feet to meters <br /> <input type = "radio" name = "rad3" value="MF" id="mTof" />Meters to Feet <br /> Number to be converted: <input type = "text" id="lengthAmount" name = "amount" value=""/> <br /> <input type = "button" id="lengthCalculate" value = "calculate" onclick = "Calc(this)" /> <br /> Result: <br /> <input type="text" id="lengthFin" value ="" readonly="readonly"/> </div> <div id = "div2" style="display:none"> Select Direction: <br /> <input type = "radio" name = "rad4" value="GL" id="gTol" checked="true" />Gallons to Liters <br /> <input type = "radio" name = "rad4" value="LG" id="lTog" />Liters to Gallons <br /> Number to be converted: <input type = "text" id="volumeAmount" name = "amount" /> <br /> <input type = "button" id="volumeCalculate" value = "calculate" onclick = "Calc(this)"> <br /> Result: <br /> <input type ="text" id="volumeFin" value="" readonly="readonly"/> </div> </code></pre> <p>Then when you get this function call you find which is called and send it to be calculated depending on what button was clicked.</p> <pre><code> function showSecond() { if (document.getElementsByTagName("input")[0].checked) { div1.style.display = "block"; div.style.display = "none"; div2.style.display = "none"; } else if (document.getElementsByTagName("input")[1].checked) { div1.style.display = "none"; div.style.display = "block"; div2.style.display = "none"; } else { div1.style.display = "none"; div.style.display = "none"; div2.style.display = "block"; } } function Calc(obj) { if (obj.id == "weightCalculate") { var amt = document.getElementById("weightAmount").value; doWeightCalc(amt); } if (obj.id == "volumeCalculate") { var amt = document.getElementById("volumeAmount").value; doVolumeCalc(amt); } if (obj.id == "lengthCalculate") { var amt = document.getElementById("lengthAmount").value; doLengthCalc(amt); } } function doWeightCalc(amt) { var res = document.getElementById("weightFin") if (document.getElementById("pTok").checked) { var ch = amt * 2.2; res.value = ch; } else { var namt = amt / 2.2; res.value = namt } } function doVolumeCalc(amt) { var res = document.getElementById("volumeFin"); if (document.getElementById("gTol").checked) { var ch = amt * 3.78541178; res.value = ch; } else { var namt = amt * 0.264172052; res.value = namt } } function doLengthCalc(amt) { var res = document.getElementById("lengthFin"); if (document.getElementById("fTom").checked) { var ch = amt * 0.3048; res.value = ch; } else { var namt = amt * 3.2808399; res.value = namt } } </code></pre> <p>I would recommend you change the fact that you're using names to ID's. Such as lengthAmount, weightAmount, and volumeAmount...</p> <p>Also, I added an ID to the weight fin and used getElementById...</p> <p>EDIT: alright I did all the functions this works! o.O!</p> <p><a href="http://jsfiddle.net/CTRFU/6/" rel="nofollow">JSFiddle</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload