If the input I put blank, then it will count 0

Question

I am trying to put some amount, then it will show the calculation if all input will given any number, but I want, when I do not put anything in any one of that input, then the input will count "0" automatically..

<body>
    <input type='text' id='aaa'/>
    <input type='text' id='bbb'/>
    <input type='text' id='ccc'/>
    <input type='text' id='answer' name='ans' />
<form name ="testarea" Method="GET" Action="" id='form1'>
    <input type="button" onClick="Calculate();" value="calculate"/>
</form>
</body>
<script>


    function Calculate()
        {
        var aaa= document.getElementById('aaa').value;
        var bbb= document.getElementById('bbb').value;
        var ccc= document.getElementById('ccc').value; 
        var permin = parseFloat(aaa) * 82;
        var permin1 = parseFloat(bbb) * 40;
        var permin2 = parseFloat(ccc) * 10;
        var permin3=permin+permin1+permin2;
        document.getElementById('answer').value=permin3;
        document.form1.submit();
    }
</script>

Why not do Calculate(aaa = 0), and force the parameter to have a default value? — CBredlow, May 31 '17 at 17:39
I tried, but if left any input blank then, the ans comes NaN @le_m — , May 31 '17 at 17:43

Jonas Wilms · Accepted Answer · 2020-09-12T13:07:21.610

1

    var aaa= document.getElementById('aaa').value;
    var bbb= document.getElementById('bbb').value;
    var ccc= document.getElementById('ccc').value; 
    var permin = (parseFloat(aaa)||0) * 82;
    var permin1 = (parseFloat(bbb)||0) * 40;
    var permin2 = (parseFloat(ccc)||0) * 10;
    var permin3=permin+permin1+permin2;
    document.getElementById('answer').value=permin3;

You can use the OR operator to replace NaN with 0 if parseFloat returns NaN.

You could shorten the upper code to:

 const ids = ["aaa","bbb","ccc"];
 const factors = [82,40,10];
 document.getElementById("answer").value = ids.reduce((count,id,index) => {
   const { value } = document.getElementById(id);
   return count + (parseFloat(value) || 0) * factors[index];
 }, 0);

edited Sep 12 '20 at 13:07

answered May 31 '17 at 17:41

Jonas Wilms

132,000
20
149
151

1

You have taken a liking to the OR operator, [haven't you?](https://stackoverflow.com/a/43985444/1647737) – le_m May 31 '17 at 17:43
2

@le_m i think we can say that it is awesome ;) – Jonas Wilms May 31 '17 at 17:46

score 0 · Answer 2 · answered May 31 '17 at 17:43

0

An alternative you can do is use a default parameter for your function.

Your calculate would look something like this:

Calculate(aaa=0, bbb, ccc) {

And this question covers how to pass html elements as parameters for functions.

answered May 31 '17 at 17:43

CBredlow

2,790
2
28
47

no! Calculate(undefined); or Calculate(document.getElementById("test")) it at least needs a bit more to become an answer – Jonas Wilms May 31 '17 at 17:55
@Jonasw what do you mean? – CBredlow May 31 '17 at 18:09
@Jonasw it does, just need to adjust the html to pass in the values from aaa, bbb, ccc. – CBredlow May 31 '17 at 18:12
if you provide a working snippet (DRY!) i give an upvote ;) ( hint: its a bit more complicated) – Jonas Wilms May 31 '17 at 18:21

score 0 · Answer 3 · answered May 31 '17 at 17:47

Instead of using an if/else construct you can rely on the falsy value of an empty string.

Therefore you can initialize all your variables like this:

var aaa = document.getElementById('aaa').value || '0';

More information on falsy values can be found on the MDN.

If the input I put blank, then it will count 0

3 Answers3