How to fix pricing on Clicking dropdown menu select-option and would change or update after clicking another option?

Question

> *** Dropdown Select-option Vehicle Type ***
<div class="col-md-8 col-sm-8">
<h5><strong>&emsp;Select <c style="color: #880707;">Vehicle</c></strong></h5>
    <select id="name" required>
       <option value="selectVehicle">----- Select Vehicle -----</option>
    <optgroup label="Pick-Up">
       <option value="Light_Truck" id="option_1">Light Truck</option>
    </optgroup>
    <optgroup label="Van">
       <option value="Van" id="option_2">Van (Manual)</option>
    </optgroup>
    <optgroup label="7-Seaters">
       <option value="Innova_AT" id="option_3">Innova (AT)</option>
       <option value="Innova_MT" id="option_4">Innova (Manual)</option>
       <option value="Xpander" id="option_5">Mitsubishi Expander</option>
       <option value="Suzuki_XL7" id="option_6">Suzuki XL7</option>
    </optgroup>
    <optgroup label="Sedan">
       <option value="Vios" id="option_7">Toyota Vios</option>
       <option value="Ciaz" id="option_8">Suzuki Ciaz</option>
       <option value="Mirage_G4" id="option_9">Mirage G4</option>
    </optgroup>
    <optgroup label="Hatchback">
       <option value="Mirage_GLS" id="option_10">Mirage GLS</option>
       <option value="Wigo" id="option_11">Toyota Wigo</option>
    </optgroup>
    </select>
</div>
> *** Days-Weeks-Months Rental Duration Input ***
<div class="col-md-12 col-sm-12">
<h5><strong>&emsp;Rental <c style="color: #880707;">Duration</c></strong></h5>
    <fieldsets>
       <input class="col-md-4" type="text" id="days" name="Days" pattern="\d*" placeholder="Days*"/>
       <input class="col-md-4" type="text" id="weeks" name="Weeks" pattern="\d*" placeholder="Weeks*"/>
       <input class="col-md-4" type="text" id="months" name="Months" pattern="\d*" placeholder="Months*"/>
    </fieldsets>
</div>
> *** Total Cost Output ***
<div class="col-md-6 col-sm-12">
<h5><strong>&emsp;Total <c style="color: #880707;">Cost</c></strong><sup>&emsp;negotiable*</sup></h5>
   <fieldset name="Total">
      <output id="cost"> $ 0.00</output>
   </fieldset>
</div>

The script works fine, it would calculate when selecting vehicles then inputting duration of rental, but vise versa it wont calculate, it stays on $ 0.00.

<script>
const rates={
    option_1:[350,2200,5400],
    option_2:[380,2400,6000],
    option_3:[300,1800,4500],
    option_4:[250,1700,4200],
    option_5:[280,1680,4510],
    option_6:[250,1690,4250],
    option_7:[180,1200,3000],
    option_8:[180,1200,3000],
    option_9:[180,1200,3000],
    option_10:[160,980,2500],
    option_11:[160,980,2500]};
    
   const D=[], cost=document.getElementById("cost");
   
   document.querySelector("fieldsets").querySelectorAll("input").forEach(e=>{D.push(e);e.addEventListener("input",calc)});
   document.querySelectorAll("option").forEach(e=>{e.addEventListener("click",calc)});
   
   function calc(ev){
    const prod=document.querySelector("option:checked"),
      r=prod?rates[prod.id]:[0,0,0];
    cost.textContent='$ '+ r.reduce((a,c,i)=>a+c*(D[i].value??0),0).toFixed(2);
   }
</script>

When inputting rental duration before selecting vehicle type it stays on $ 0.00 and vise versa works fine but after click other option the output stays as is.

Answer 1

it seems you're missing a check for the option id before running the calc, so i added an if statement to use before running the reduce function,

if(prod.id){ ... //reduce function }

you can now try the snippet

 const rates={ option_1:[350,2200,5400], option_2:[380,2400,6000], option_3:[300,1800,4500], option_4:[250,1700,4200], option_5:[280,1680,4510], option_6:[250,1690,4250], option_7:[180,1200,3000], option_8:[180,1200,3000], option_9:[180,1200,3000], option_10:[160,980,2500], option_11:[160,980,2500]}; const D=[], cost=document.getElementById("cost"); document.querySelector("fieldsets").querySelectorAll("input").forEach(e=>{D.push(e);e.addEventListener("input",calc)}); document.querySelectorAll("option").forEach(e=>{e.addEventListener("click",calc)}); function calc(ev){ const prod=document.querySelector("option:checked"), r=prod?rates[prod.id]:[0,0,0]; if(prod.id){ cost.textContent='₱ '+ r.reduce((a,c,i)=>a+c*(D[i].value??0),0).toFixed(2); } }

 > *** Dropdown Select-option Vehicle Type *** <div class="col-md-8 col-sm-8"> <h5><strong>&emsp;Select <c style="color: #880707;">Vehicle</c></strong></h5> <select id="name" required> <option value="selectVehicle">----- Select Vehicle -----</option> <optgroup label="Pick-Up"> <option value="Light_Truck" id="option_1">Light Truck</option> </optgroup> <optgroup label="Van"> <option value="Van" id="option_2">Van (Manual)</option> </optgroup> <optgroup label="7-Seaters"> <option value="Innova_AT" id="option_3">Innova (AT)</option> <option value="Innova_MT" id="option_4">Innova (Manual)</option> <option value="Xpander" id="option_5">Mitsubishi Expander</option> <option value="Suzuki_XL7" id="option_6">Suzuki XL7</option> </optgroup> <optgroup label="Sedan"> <option value="Vios" id="option_7">Toyota Vios</option> <option value="Ciaz" id="option_8">Suzuki Ciaz</option> <option value="Mirage_G4" id="option_9">Mirage G4</option> </optgroup> <optgroup label="Hatchback"> <option value="Mirage_GLS" id="option_10">Mirage GLS</option> <option value="Wigo" id="option_11">Toyota Wigo</option> </optgroup> </select> </div> > *** Days-Weeks-Months Rental Duration Input *** <div class="col-md-12 col-sm-12"> <h5><strong>&emsp;Rental <c style="color: #880707;">Duration</c></strong></h5> <fieldsets> <input class="col-md-4" type="text" id="days" name="Days" pattern="\d*" placeholder="Days*"/> <input class="col-md-4" type="text" id="weeks" name="Weeks" pattern="\d*" placeholder="Weeks*"/> <input class="col-md-4" type="text" id="months" name="Months" pattern="\d*" placeholder="Months*"/> </fieldsets> </div> > *** Total Cost Output *** <div class="col-md-6 col-sm-12"> <h5><strong>&emsp;Total <c style="color: #880707;">Cost</c></strong><sup>&emsp;negotiable*</sup></h5> <fieldset name="Total"> <output id="cost"> ₱ 0.00</output> </fieldset> </div>