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

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;
  }    
}

<div id="form_step_1">
<div >
<div >
<div >
  <h4>GB</h4>
  <div  style="display: inline-block">
      <div >
        <input  type="radio"
             id="features-1"
             name="1"
             value="features-value-1"
             data-money="-300"
             data-product-money="2500"
              onclick="PriceCalculator('gb', -300)"
        >
        <label  style="display: inline-block;" for="features-1">16GB</label>
      </div>
      <div >
        <input  type="radio"
             id="features-2"
             name="1"
             value="features-value-2"
             data-money="-200"
             data-product-money="2500"
              onclick="PriceCalculator('gb', -200)"
        >
        <label  style="display: inline-block;" for="features-2">32GB</label>
      </div>
      <div >
        <input  type="radio"
             id="features-3"
             name="1"
             value="features-value-3"
             data-money="-50"
             data-product-money="2500"
              onclick="PriceCalculator('gb', -50)"
        >
        <label  style="display: inline-block;" for="features-3">64GB</label>
      </div>
  </div>
  
  <h4>DISPLAY</h4>
  <div  style="display: inline-block">
      <div >
        <input  type="radio"
             id="features-1"
             name="2"
             value="features-value-1"
             data-money="0"
             data-product-money="2500"
              onclick="PriceCalculator('display', 2500)"
        >
        <label  style="display: inline-block;" for="features-1">Durable</label>
      </div>
      <div >
        <input  type="radio"
             id="features-2"
             name="2"
             value="features-value-2"
             data-money="-1500"
             data-product-money="2500"
              onclick="PriceCalculator('display', 1500)"
        >
        <label  style="display: inline-block;" for="features-2">Broken</label>
      </div>
  </div>
</div>
</div>
<div style="position:absolute; right: 0px;">
<div style="display: inline-block; margin-right: 20px"><strong>Pre-bid price:</strong> <div style="display: inline-block" id="money">Not calculated</div></div>
</div>
</div>
</div>

CodePudding user response：

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", () => {
  document.getElementById("form_step_1").addEventListener("input",() => {
    let sum = 0;
    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.productMoney),
            Number(rad.dataset.money))
          sum  = Number(rad.dataset.productMoney)   Number(rad.dataset.money)
        })
      }
      document.getElementById("money").textContent = sum.toFixed(2);
    })
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="form_step_1">
  <div >
    <div >
      <div >
        <h4>GB</h4>
        <div  style="display: inline-block">
          <div >
            <input  type="radio" id="features-1" name="1" value="features-value-1" data-money="-300" data-product-money="2500">
            <label  style="display: inline-block;" for="features-1">16GB</label>
          </div>
          <div >
            <input  type="radio" id="features-2" name="1" value="features-value-2" data-money="-200" data-product-money="2500">
            <label  style="display: inline-block;" for="features-2">32GB</label>
          </div>
          <div >
            <input  type="radio" id="features-3" name="1" value="features-value-3" data-money="-50" data-product-money="2500">
            <label  style="display: inline-block;" for="features-3">64GB</label>
          </div>
        </div>
      </div>
      <div >
        <h4>DISPLAY</h4>
        <div  style="display: inline-block">
          <div >
            <input  type="radio" id="features-1" name="2" value="features-value-1" data-money="0" data-product-money="2500">
            <label  style="display: inline-block;" for="features-1">Durable</label>
          </div>
          <div >
            <input  type="radio" id="features-2" name="2" value="features-value-2" data-money="-1500" data-product-money="2500">
            <label  style="display: inline-block;" for="features-2">Broken</label>
          </div>
        </div>
      </div>
    </div>
    <div style="position:absolute; right: 0px;">
      <div style="display: inline-block; margin-right: 20px"><strong>Pre-bid price:</strong>
        <div style="display: inline-block" id="money">Not calculated</div>
      </div>
    </div>
  </div>
</div>

jQuery

$(function() {
  $("#form_step_1").on("input", function() {
    let sum = 0;
    $(".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("productMoney")),
            Number($(this).data("money")))
          sum  = Number($(this).data("productMoney"))   Number($(this).data("money"))
        })
      }
      $("#money").text(sum.toFixed(2))
    })
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="form_step_1">
  <div >
    <div >
      <div >
        <h4>GB</h4>
        <div  style="display: inline-block">
          <div >
            <input  type="radio" id="features-1" name="1" value="features-value-1" data-money="-300" data-product-money="2500">
            <label  style="display: inline-block;" for="features-1">16GB</label>
          </div>
          <div >
            <input  type="radio" id="features-2" name="1" value="features-value-2" data-money="-200" data-product-money="2500">
            <label  style="display: inline-block;" for="features-2">32GB</label>
          </div>
          <div >
            <input  type="radio" id="features-3" name="1" value="features-value-3" data-money="-50" data-product-money="2500">
            <label  style="display: inline-block;" for="features-3">64GB</label>
          </div>
        </div>
      </div>
      <div >
        <h4>DISPLAY</h4>
        <div  style="display: inline-block">
          <div >
            <input  type="radio" id="features-1" name="2" value="features-value-1" data-money="0" data-product-money="2500">
            <label  style="display: inline-block;" for="features-1">Durable</label>
          </div>
          <div >
            <input  type="radio" id="features-2" name="2" value="features-value-2" data-money="-1500" data-product-money="2500">
            <label  style="display: inline-block;" for="features-2">Broken</label>
          </div>
        </div>
      </div>
    </div>
    <div style="position:absolute; right: 0px;">
      <div style="display: inline-block; margin-right: 20px"><strong>Pre-bid price:</strong>
        <div style="display: inline-block" id="money">Not calculated</div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

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