Палец вверх 3
Перевод
Перевод

JavaScript с кнопками

Я создаю программу конвертации единиц. У меня все работает, кроме моей функции вычисления и где отображается ответ. Все, что мне нужно, - это как рассчитать конверсии друг друга и отобразить ответ в пустом текстовом поле под кнопкой вычисления. вот мой код

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>
javascript html
задан beginnerprogrammer 29 февр. 2012 г., 3:49:08
источник

2 ответа

Палец вверх 1
Перевод
Перевод

Попытался запустить в JSFiddle и не смог заставить его работать так, как я хочу, но может быть просто на моей стороне или, возможно, я сделал что-то не так

Что бы я сделал: чтобы у кнопок были разные идентификаторы, такие как:

<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
         }

    }​

Я бы порекомендовал вам изменить тот факт, что вы используете имена на идентификаторы. Такие как lengthAmount, weightAmount и volumeAmount ...

Кроме того, я добавил идентификатор в весовой плавник и использовал getElementById ...

РЕДАКТИРОВАТЬ: хорошо, я сделал все функции, это работает! оо!

JSFiddle

ответ дан jveselka 29 февр. 2012 г., 4:37:25
источник
Палец вверх 0
Перевод
Перевод
    var displayed = div1;
function showSecond() {
    if (document.getElementsByTagName("input")[0].checked){
        div1.style.display = "block";
        div.style.display = "none";
        div2.style.display = "none";
        displayed = div1;
    }
    else if (document.getElementsByTagName("input")[1].checked){
        div1.style.display = "none";
        div.style.display = "block";
        div2.style.display = "none";
        displayed = div;
    }
    else {
        div1.style.display = "none";
        div.style.display = "none";
        div2.style.display = "block";
        displayed = div2;
    }
}

function Calc()
{
    var amt = displayed.getElementsByName("amount")[0].value*1;
    var res = displayed.getelementsByName("fin")[0];
    if (displayed.getElementsByName("rad2")[0].checked) {
        var ch = amt * 2.2;
        res.value = ch;
    } else {
        res = amt / 2.2;
        res.value = ch;
    }
}

в вашем коде много запутанного места, но я думаю, что это должно сработать. Вы должны прочитать больше уроков для начинающих

2012/3/1 Я разместил весь отредактированный код на jsfiddle: http://jsfiddle.net/t7mTf/1/

ответ дан Torrent Lee 29 февр. 2012 г., 5:07:08
источник