CODEWITHSUNDEEP
javascript
Felix
Felix

Reputation: 1017

Sum up input fields after some calulations

Hi I am writing a function to sum up the values of input areas, it should change the values dynamically. So when someone adds a new value the total value should automatically change.

Here is HTML-code:

<input id="fenster" onkeyup="val()" type="number">
<input id="fassade" onkeyup="val()" type="number">
<input id="keller" onkeyup="val()" type="number">

And here is the JS:

function id(id){return document.getElementById(id);}
var val1 = 0;
var val2 = 0;
var val3 = 0;
function val(){
val1 = parseInt(id("fenster").value);
val2 = parseInt(id("fassade").value);
val3 = parseInt(id("keller").value);
val_fenster = val1 * 30;
val_fassade = val2 * 30;
val_keller = val3 * 10;
id("total").innerHTML = ((val_fenster > 0 && val_fassade > 0 && val_keller > 0))?     val_fenster + val_fassade + val_keller: val_fenster;
}

The function only updates when all three values are included. But it would be good if it updates after every value and also if one does not enter the first value.

Upvotes: 0

Views: 69

Answers (4)

Ashish Panchal
Ashish Panchal

Reputation: 504

I guess, you can re-write the function as below, I have replaced the onkeyup method with onblur to fire the event only when the focus moves out of the input box and not on any keyup.

HTML Code:

<input id="fenster" onblur="val()" type="number">
<input id="fassade" onblur="val()" type="number">
<input id="keller" onblur="val()" type="number">

<div id="total"></div>

JS Code:

function id(id){
    return document.getElementById(id);
}
function val(){
    var val1 = parseInt(id("fenster").value) || 0,
        val2 = parseInt(id("fassade").value) || 0,
        val3 = parseInt(id("keller").value) || 0;

    console.log(val1, val2, val3);
    var val_fenster = val1 * 30,
        val_fassade = val2 * 30,
        val_keller = val3 * 10;

    id("total").innerHTML = val_fenster + val_fassade + val_keller;
}

Hope this helps!

Upvotes: 1

Alok
Alok

Reputation: 522

you can also use this

id("total").innerHTML = (isNaN(val_fenster) && isNaN(val_fassade) && isNaN(val_keller))? (val_fenster + val_fassade + val_keller): val_fenster;

Upvotes: 0

sitaram9292
sitaram9292

Reputation: 171

try this

function id(id){return document.getElementById(id);}
var val1 = 0;
var val2 = 0;
var val3 = 0;
function val(){
val1 = parseInt(id("fenster").value);
val2 = parseInt(id("fassade").value);
val3 = parseInt(id("keller").value);
if(!val1)
val1=0;
if(!val2)
val2=0;
if(!val3)
val3=0;
val_fenster = val1 * 30;
val_fassade = val2 * 30;
val_keller = val3 * 10;
id("total").innerHTML = ((val_fenster >= 0 && val_fassade >= 0 && val_keller >= 0))?            val_fenster + val_fassade + val_keller: val_fenster;
 }

It will work with out any problem

Upvotes: 0

Matt Burland
Matt Burland

Reputation: 45155

The function only updates when all three values are included.

Presumably your >0 checks are to handle the case where there are blank inputs because they will parse as NaN and anything + NaN == NaN. So probably you best approach is to substitute 0 when your parseInt returns NaN. This can be easily done like this:

val1 = parseInt(id("fenster").value) || 0;

Now if parseInt gives NaN, which is falsy, you will assign 0 instead.

Also note, you should specify the radix for parseInt:

val1 = parseInt(id("fenster").value, 10) || 0;

Because leading zeros will cause it to think it's octal.

Also, it would probably be easier to assign a class to your inputs and then get them all at once and loop through them.

Upvotes: 1

Related Questions