javascript with buttons

Question

I am creating a unit conversion program. I have everything working except for my calculate function and where the answer is being displayed. All i need help on is how to calculate each other the conversions, and to display the answer in a empty textbox that is below the calculate button. here is my 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()
{
    var amt = document.getElementsByName(amount)    
    var res = document.getelementsByName(fin)
    if (document.getElementsByName("rad2")[0].checked) {
        var ch = amt * 2.2;
        document.write(fin) = ch;
    }
    else {
        res = amt / 2.2;
        document.write(res)
    }

Select Conversion Type: 
<br />
<input type = "radio" name = "rad1" onclick= "showSecond()" />Length
<br />
<input type = "radio" name = "rad1" onclick = "showSecond()" />Weight
<br />
<input type = "radio" name = "rad1" onclick = "showSecond()" />Volume
<br />

<div id = "div" style="display:none">
    Select Direction:
    <br />
    <input type = "radio" name = "rad2" value="PG" />Pounds to Kgs
    <br />
    <input type = "radio" name = "rad2" value="KP" />Kgs to Pounds
    <br />
    Number to be converted: <input type = "text" name = "amount" />
    <br />
    <input type = "button" value = "calculate" onclick = "Calc()" /> 
    <br />
    <input type ="text" name ="fin" value="" readonly="readonly"/>
</div>

<div id = "div1" style="display:none">
    Select Direction:
    <br />
    <input type = "radio" name = "rad3" value="FM" />Feet to meters
    <br />
    <input type = "radio" name = "rad3" value="MF" />Meters to Feet
    <br />
    Number to be converted: <input type = "text" name = "amount" value=""/>
    <br />
    <input type = "button" value = "calculate" onclick = "Calc()" /> 
    <br />
    Result: <br />
    <input type="text" name ="fin" value ="" readonly="readonly"/>
 </div>

<div id = "div2" style="display:none">
    Select Direction:
    <br />
    <input type = "radio" name = "rad4" value="GL" />Gallons to Liters
    <br />
    <input type = "radio" name = "rad4" value="LG" />Liters to Gallons
    <br />
    Number to be converted: <input type = "text" name = "amount" />
     <br />
    <input type = "button" value = "calculate" onclick = "Calc()"> 
    <br />
    Result: <br />
    <input type ="text" name = "fin"  value="" readonly="readonly"/>
</div>

Answer 1

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

What I would do: Make the button's have different ID's such as:

<input type = "button" id="weightCalculate" value = "calculate" onclick = "Calc(this)" />

Something like so:

  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>

Then when you get this function call you find which is called and send it to be calculated depending on what button was clicked.

 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
         }

    }​

I would recommend you change the fact that you're using names to ID's. Such as lengthAmount, weightAmount, and volumeAmount...

Also, I added an ID to the weight fin and used getElementById...

EDIT: alright I did all the functions this works! o.O!

JSFiddle