如何制作切换按钮/反转按钮.类似于谷歌翻译

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

本文关键字：按钮 类似于 谷歌 翻译 何制作      更新时间：2023-09-26

我正在制作一个小计算器，将KG转换为磅，将磅转换为KG，并在输入上写入。但是，我只想用一个按钮来计算！懂

KG至POUNDS->千克*2.2046

磅至千克->磅/2.2046

示例1:

场1:50 kg

计算…

字段2（结果）：110.23磅

然后会有一个按钮让我更改功能（谷歌翻译的按钮可以在每次点击时更改语言）我点击。。

示例2:

场1:100磅

计算…

字段2（结果）：45.35

你能理解我做什么吗？

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(){
      ???
 }

我认为你想要的只是一个简单的变量来跟踪你所处的"模式"

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();
});

听起来您需要使用innerHtml。一些基本的伪逻辑：

var a = document.getElementById("one").innerHtml;
var b = document.getElementById("two").innerHtml;
document.getElementById("one").innerHtml = b;
document.getElementById("two").innerHtml = a;
相关文章：