By creating 2 events you can multiply the two elements and play input valor
. Altering the select
or the input
will already call the function that does the multiplication (explanations in the code):
document.addEventListener("DOMContentLoaded", function(){ // aguarda o DOM carregar
var sel = document.querySelector("select[name='papel']"); // seleciona o SELECT
var qtd = document.querySelector("input[name='quantidade']"); // seleciona o INPUT quantidade
sel.onchange = multi; // evento change do SELECT
qtd.oninput = multi; // evento oninput do INPUT quantidade
// função para realizar a multiplicação
function multi(){
// converte o valor do SELECT em float e troca a vírgula da decimal por ponto, se houver
var papel = parseFloat(sel.value.replace(",","."));
var quant = qtd.value; // valor do INPUT quantidade
var res = papel * quant; // faz a multiplicação
// insere no INPUT valor se não for NaN. Se for NaN insere 0
// toFixed(2) seta 2 casas decimais e o replace troca o ponto decimal pela vírgula
document.querySelector("input[name='valor']").value = !isNaN(res) ? res.toFixed(2).replace(".", ",") : 0;
}
});
<!-- SOMAR ESSE SELECT -->
<select name="papel">
<option value="">Tipo Papel</option>
<option value="12,00">A4 - R$12,00</option>';
<option value="15.10">A3 - R$15,10</option>';
</select>
<!-- COM ESSE INPUT -->
<input type="text" name="quantidade" placeholder="Quantidade">
<!-- E EXIBIR O RESULTADO NESTE OUTRO INPUT -->
<input type="text" name="valor" placeholder="Valor total">
Add or multiply?
– Sam
It’s javascript even, it’s not?
– Sam