Price calculation with javascript for my data in the loop coming from the database

Question

I want the prices of the data coming from my database to be displayed on the screen with Javascript. I wrote a code like this but it only works this way. I may have more than one data from the database. For example, more than one title may come instead of gb or screen. I'm trying to loop for this but I couldn't. Could you help?

const values = {
  gb: null,
  display: null,
}

function PriceCalculator(label, newPrice) {
  values[label] = newPrice;
  if(values.gb != null && values.display != null){
    var total = values.gb + values.display;
    var result =  Number(total).toLocaleString("pt-BR",{minimumFractionDigits: 2, maximumFractionDigits: 2});
    document.getElementById("money").innerHTML=result;
  }    
}





  GB
  
      
        
        16GB
      
      
        
        32GB
      
      
        
        64GB
      
  
  
  DISPLAY
  
      
        
        Durable
      
      
        
        Broken
      
  



Pre-bid price: Not calculated

Aadesh · Answer

If you have an object like this (which can dynamically change in size / key values)

const values = {
  gb: 100,
  display: 400,
  test: -1200,
  best: 500
}

then the total of all values can be calculated dynamically like this:

const total = Object.values(values).reduce((x,y)=>x=+y,0)

For the purpose of understanding, this can be broken down and console.logged like this

const numbers = Object.values(values);
console.log(numbers) // returns [100,400,-1200,500]
const total = numbers.reduce((x,y)=>x=+y,0) // returns total = -200

mplungjan · Answer

So like last time, delegate - I am using jQuery because your previous code used it. I'll add the vanilla one too

window.addEventListener("DOMContentLoaded", () => {
  const total = document.getElementById("money");
  document.getElementById("form_step_1").addEventListener("input", e => {
    let sum = +e.target.closest(".container").dataset.productPrice;
    document.querySelectorAll(".row h4").forEach(h4 => {
      let title = h4.textContent,
        container = h4.closest("div"), // parent
        chosen = container.querySelectorAll("[type=radio]:checked");
      if (chosen.length !== 0) {
        chosen.forEach(rad => {
          console.log(title,rad.value,Number(rad.dataset.discount))
          sum += Number(rad.dataset.discount)
        })
      }
      total.textContent = sum.toFixed(2);
    })
  })
})



  
    
      
        GB
        
          
            
            16GB
          
          
            
            32GB
          
          
            
            64GB
          
        
      
      
        DISPLAY
        
          
            
            Durable
          
          
            
            Broken
          
        
      
    
    
      Pre-bid price:
        Not calculated

jQuery

$(function() {
  $("#form_step_1").on("input", function(e) {
    let sum = +$(e.target).closest("div.container").data("price");
    console.log(sum)
    $(".row h4").each(function() {
      let title = $(this).text(),
        $container = $(this).closest("div"), // parent
        $chosen = $container.find("[type=radio]:checked");
      if ($chosen.length !== 0) {
        $chosen.each(function() {
          console.log(title,$(this).val(),Number($(this).data("discount")));
          sum += Number($(this).data("discount"));
        })
      }
      $("#money").text(sum.toFixed(2))
    })
  })
})



  
    
      
        GB
        
          
            
            16GB
          
          
            
            32GB
          
          
            
            64GB
          
        
      
      
        DISPLAY
        
          
            
            Durable
          
          
            
            Broken
          
        
      
    
    
      Pre-bid price:
        Not calculated

Price calculation with javascript for my data in the loop coming from the database

2 Answers