简体   繁体   中英

How to make a switch button/reverse button. Similar to google translate

I'm make a little calc tha convert KG in Pounds and Pounds in KG and write on an input. But, I want make this with only one button to calc! Understand?

KG to POUNDS -> KG * 2.2046

POUNDS to KG -> POUNDS / 2.2046

Example 1:

Field 1: 50 kg

....calc...

Field 2 (result): 110.23 Pounds

Then there will be the button for me to change the function (Button of Google Translate to change the languagues in every click) I click and ..

Example 2:

Field 1: 100 pounds

...calc...

Field 2 (result): 45.35

Can you understand what I do?

function calcPD(){

    var pound = document.getElementById("field1").value;
    var calc = quilos / 2.2046;
    var resul = document.getElementById("pound").value=calcularr.toFixed(2);        
    }

function calcKg(){      

    var kg = document.getElementById("field1").value;
    var calc = quilo * 2.2046;
    var resul = document.getElementById("pound").value=calcular.toFixed(2);                         
    }
 funcion invert(){

      ???
 }

Sounds like you need to use innerHtml . Some basic pseudo logic for you:

var a = document.getElementById("one").innerHtml;
var b = document.getElementById("two").innerHtml;

document.getElementById("one").innerHtml = b;
document.getElementById("two").innerHtml = a;

I think what you're looking for is just a simple variable to keep track of what "mode" you are in. I've built an example for you to see how this would work (I used bootstrap to make it pretty, but obviously that's optional):

https://jsfiddle.net/DTcHh/13851/

HTML

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            Input: 
            <input id="inputNum" class="form-control" type="number"></input>
        </div>

        <div class="col-xs-6">
            Output: 
            <input id="outputNum" class="form-control" type="text" disabled></input>
        </div>
    </div>

    <span id="modeText">lbs to kg</span>
    <button id="switch" class="btn pull-right">Switch</button> 
</div>

Javascript

//0 = lbs to kg, 1 = kg to lbs
var mode = 0;

var inputNum = $("#inputNum");
var outputNum = $("#outputNum");
var switchMode = $("#switch");
var modeText = $("#modeText");

var calculateKgs = function() {
    outputNum.val(inputNum.val()/2.2046);
};

var calculateLbs = function() {
    outputNum.val(inputNum.val()*2.2046);
};

var calculate = function() {
    if(mode == 0)
        calculateKgs();
    else
        calculateLbs();
};

inputNum.change(calculate);
inputNum.keyup(calculate);

switchMode.click(function() {
    if(mode) {
        mode = 0;
        modeText.text("lbs to kg");
    }
    else {
        mode = 1;
        modeText.text("kg to lbs");
    }

    calculate();
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM