带有按钮的javascript

Question

我正在创建一个单位转换程序。除了我的计算功能和显示答案的位置外，我一切正常。我需要帮助的是如何相互计算转换，以及如何在计算按钮下方的空文本框中显示答案。这是我的代码。

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

试图在 JSFiddle 中运行，但无法让它按照我想要的方式工作，但呃可能只是站在我这边，或者我做错了什么

我会做什么: 使按钮具有不同的 ID，例如:

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

像这样:

  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>

然后，当您收到此函数调用时，您会发现调用了哪个函数并将其发送以根据单击的按钮进行计算。

 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
         }

    }​

我建议您将名称改为 ID。比如 lengthAmount、weightAmount 和 volumeAmount...

此外，我为配重鳍添加了一个 ID 并使用了 getElementById...

编辑:好吧，我完成了所有有效的功能!哦!

JSFiddle