How to multiply the value of 3 inputs using pure javascript?

Asked

Viewed 3,291 times

1

I’m trying to multiply 3 fields, the total value will be returned in a new label. But I’m not getting it. When I did with only 1 field, it worked:

http://jsfiddle.net/dorathoto/PLrCK/

I even tried to make a if (isNaN( but did not help. No error, but does not work!

javascript
  • 1

    Your problem is that by onchangeing an element you are passing a string and not a content

  • I believe you will have to do the onchange only at the last to have all 3 parameters if it will not have way

2 answers

4

Your problem is that by doing onchange you are always passing two string’s, so you will multiply the value of the input you are passing (correctly) plus two strings.

Your mistake was:

onchange="MudaPreco(this.value,'txt_Largura_1','txt_Inclinicacao_1','PrecoProd_1')

And what the job was gonna get:

function MudaPreco(4, txt_Largura_1, txt_Inclinicacao_1, PrecoProd_1)

So as you calculate var Total stayed: 

var Total = 4* txt_Largura_1* txt_Inclinicacao_1

Here’s what I advise you to do:

    comprimentoID = $('#txt_Comprimento_1').val();
    LarguraID = $('#txt_Largura_1').val();
    InclinacaoID = $('#txt_Inclinicacao_1').val();

    var Total = comprimentoID * LarguraID * InclinacaoID;

I leave JSFIDDLE with an example of resolution.

EDIT: Without the Jquery

You can use the document.getElementById('txt_Comprimento_1').value which is native to javascript.

LINK without jquery.

  • All right, I’ll edit

  • I appreciate the answer, it really works, but for other reasons I am implementing in pure javascript, but if I can not use your solution.

  • document.getElementById is pure javascript. You are at ease :)

  • now I see that this 100% worth

4


Change your total variable:

 var Total = document.getElementById(comprimentoID).value * document.getElementById(LarguraID).value * document.getElementById(InclinacaoID).value;

The problem is that you are passing to the function the ID of the field that contains the value that needs to be multiplied.

Also change the onChange event of each field, instead of passing the filled value in the length field, pass the field ID:

<input id="txt_Comprimento_1"  type="number"   onchange="MudaPreco('txt_Comprimento_1','txt_Largura_1','txt_Inclinicacao_1','PrecoProd_1')" /><br>
<input id="txt_Largura_1" type="number" onchange="MudaPreco('txt_Comprimento_1','txt_Largura_1','txt_Inclinicacao_1','PrecoProd_1')"   /><Br>
<input id="txt_Inclinicacao_1" type="number" onchange="MudaPreco('txt_Comprimento_1','txt_Largura_1','txt_Inclinicacao_1','PrecoProd_1')"  /><br><br>

  • So it only works for the first onchange

  • @Cesarmiguel works for everyone. The value will only be calculated after filling the 3 fields, otherwise there is a multiplication by 0.

  • It works if you change the length you have there

  • @Cesarmiguel understood, I will change.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.