How to make a transition button similar to Google Translate for a mathematical operation

Question

How to make a transition button similar to Google Translate for a mathematical operation

Navigation

#1 by (2 votes)

3

I'm creating a small calculator that converts Kilograms to Pounds
and Pounds in Kilograms .

My goal is to insert a value into a first input and display the result in a second input that follows. For example:

<input id='in' value='1' type='text'/>             <!-- O usuário insere 1KG no primeiro input para converter em Pounds -->
<input id='out' value='2.20462262' type='text'/>   <!-- E o resultado aparecerá aqui no seguindo input: 2.20462262 -->

The basic concept is this! But now I wanted to have a Google Translate button in the middle of these two inputs , in which I would reverse the calculation units, ie at the beginning we would be calculating - ( KG para Pounds ), clicking on the button will invert the units of calculation / weight and now we will be calculating - (% with%). All this in one button.

Better explaining. At first we would be calculating how many kilos would be a Pounds para KG value in Pounds:

.caixa {display: inline-block;}

<div class="caixa">
    Quilogramas<br />
    <input id='field1' value='50' type='text'/>
</div>
<div class="caixa"><button id='switch'>Inverter Unidade</button></div>
<div class="caixa">
    Pounds<br />
    <input id='field2' value='110.23' type='text'/>
</div>

By clicking the X button, it reverses the weight units and can now calculate how many Inverter Unidade will be Pounds in X :

.caixa {display: inline-block;}

<div class="caixa">
    Pounds<br />
    <input id='field1' value='100' type='text'/>
</div>
<div class="caixa"><button id='switch'>Inverter Unidade</button></div>
<div class="caixa">
    Quilogramas<br />
    <input id='field2' value='45.35' type='text'/>
</div>

Have you understood what I want to do? Here is the code for what I have so far:

function calcPD(){
    var pound = document.getElementById("field1").value;
    var calc = quilos / 2.2046;
    var resul = document.getElementById("field2").value=calcular.toFixed(2);    
}

function calcKg(){      
    var kg = document.getElementById("field1").value;
    var calc = quilo * 2.2046;
    var resul = document.getElementById("field2").value=calcular.toFixed(2);                            
}

javascript html

asked by anonymous 30.10.2015 / 02:51

1 answer

Are there any keyword rules on Google Play? Entity can not be referenced by multiple instances

score 2 · Accepted Answer

Expensive,

I have developed a solution for your need, any questions are just a comment, but the code is well qualified. Here's also an example in jsFiddle if you prefer.

var conversor = {
    // Valores do Objeto conversor
    valor : document.getElementById('iptValor'),
    resultado : document.getElementById('iptResultado'),
    labelValor : document.getElementById('lblValor'),
    labelResultado : document.getElementById('lblResultado'),
    unidade : 2.2046,
    operacao : 'Kilos',
    // Valores Funções do Objeto conversor
    Kilos : function() {
      return this.valor.value * this.unidade;
    },
    Pounds : function() {
      return this.valor.value / this.unidade;
    },
    trocar : function() {
      this.labelResultado.innerText = this.operacao;
      this.operacao = this.operacao === 'Kilos' ? 'Pounds' : 'Kilos';
      this.labelValor.innerText = this.operacao;
      this.calcular(this.valor.value);
    },
    // Função para conversão.
    calcular : function() {
      if(this.valor.value != '')
      	this.resultado.value = conversor[this.operacao]().toFixed(4); // .toFixed(4) fixa 4 casas decimais.
    }
}

// Adiciona o evento click ao botão trocar
document.getElementById('trocar').addEventListener('click', function() {
	conversor.trocar(); // Chama a função que troca a conversão
}, false);
// Adiciona o evento click ao botão calcular
document.getElementById('calcular').addEventListener('click', function() {
	conversor.calcular(); // Chama a função que calcula a conversão
}, false);

<div>
    <!-- Label + Input referente ao valor base da conversão -->
    <label id="lblValor" for="iptValor">Kilos</label>
    <input type="number" id="iptValor">
    <!-- Neste botão será adiciona um evento de click -->
    <button id="trocar">Trocar</button>
    <!-- Label + Input referente ao resultado da conversão -->
    <label id="lblResultado" for="iptResultado">Pounds</label>
    <input type="number" id="iptResultado">
    <!-- Neste botão será adiciona um evento de click -->
    <button id="calcular">Calcular</button>
</div>