正确添加输入值并将其显示在总输入框中

Question

Am having problem adding my multiple input value together and showing it in a input value, i do get the input with id and i convert them to int with parseInt() but i do noticed that if i don't fill all input the total shows NAN and am evening having problem displaying the total value in the total_charge input..

i already tried what i can but can't seems to fixed it

My HTML code :

<input type="text" id="consult_charge" placeholder="consult" onkeyup="addValue();"><br><br>
<input type="text" id="medicine_charge" placeholder="medicine" onkeyup="addValue();"><br><br>
<input type="text" id="injection_charge" placeholder="injection" onkeyup="addValue();"><br><br>
<input type="text" id="blood_report_charge" placeholder="blood report" onkeyup="addValue();"><br><br>
<input type="text" id="xray_charge" placeholder="xray" onkeyup="addValue();"><br><br>
<input type="text" id="total_charge" placeholder="total"><br><br>

My JS code :

function addValue(){
        var consult = document.getElementById('consult_charge').value;
        consult = parseInt(consult);

        var medicine = document.getElementById('medicine_charge').value;
        medicine = parseInt(medicine);

        var injection = document.getElementById('injection_charge').value;
        injection = parseInt(injection);

        var blood = document.getElementById('blood_report_charge').value;
        blood = parseInt(blood);

        var xray = document.getElementById('xray_charge').value;
        xray = parseInt(xray);

        var total = document.getElementById('total_charge').value;

        if (consult == '' && medicine != '' && injection != '' & blood != '' && xray != '' ) {
            total = medicine + injection + blood + xray;
        } else if(consult != '' && medicine == '' && injection != '' & blood != '' && xray != '' ) {

            total = consult + injection + blood + xray;

        } else if(consult != '' && medicine != '' && injection == '' & blood != '' && xray != '' ) {

            total = consult + medicine + blood + xray;

        } else if(consult != '' && medicine != '' && injection != '' & blood == '' && xray != '' ) {

            total = consult + medicine + injection + xray;

        } else if(consult != '' && medicine != '' && injection != '' & blood != '' && xray == '' ) {

            total = consult + medicine + injection + blood;

        } else if(consult != '' && medicine != '' && injection != '' & blood != '' && xray != '' ){

            total = consult + medicine + injection + blood + xray;

        } else{
            total = '';
        }

        console.log(total);


    }

Or is there another method i can achieve these?

Answer 1

The issue is if no value is entered in medicine field

var medicine = document.getElementById('medicine_charge').value;
medicine = parseInt(medicine);

this will return medicine to be null ;

We can do something like this -:

function addValue(){
            var consult = parseInt(document.getElementById('consult_charge').value) || 0;
            var medicine = parseInt(document.getElementById('medicine_charge').value) || 0;
            var injection = parseInt(document.getElementById('injection_charge').value) || 0;
            var blood = parseInt(document.getElementById('blood_report_charge').value) || 0;
            var xray = parseInt(document.getElementById('xray_charge').value) || 0;    
            var total = parseInt(document.getElementById('total_charge').value) || 0;
            total = (consult + medicine + injection + blood + xray) || '';
            document.getElementById('total_charge').value = total;
            console.log(total);
        }