使用 javascript 計算來自數據庫的循環中我的數據的價格

Question

我希望來自我的數據庫的數據的價格與 Javascript 一起顯示在屏幕上。 我寫了這樣的代碼，但它只能以這種方式工作。 我可能有不止一個來自數據庫的數據。 例如，可能會出現多個標題而不是 gb 或 screen。 我正在嘗試為此循環，但我做不到。 你能幫忙嗎？

 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 class="container"> <div class="row"> <div class="talepler mb-3"> <h4>GB</h4> <div class="row mb-3" style="display: inline-block"> <div class="col-sm-3 col-md-4 col-lg-3"> <input class="inputs" type="radio" id="features-1" name="1" value="features-value-1" data-money="-300" data-product-money="2500" onclick="PriceCalculator('gb', -300)" > <label class="btn btn-pill" style="display: inline-block;" for="features-1">16GB</label> </div> <div class="col-sm-3 col-md-4 col-lg-3"> <input class="inputs" type="radio" id="features-2" name="1" value="features-value-2" data-money="-200" data-product-money="2500" onclick="PriceCalculator('gb', -200)" > <label class="btn btn-pill" style="display: inline-block;" for="features-2">32GB</label> </div> <div class="col-sm-3 col-md-4 col-lg-3"> <input class="inputs" type="radio" id="features-3" name="1" value="features-value-3" data-money="-50" data-product-money="2500" onclick="PriceCalculator('gb', -50)" > <label class="btn btn-pill" style="display: inline-block;" for="features-3">64GB</label> </div> </div> <h4>DISPLAY</h4> <div class="row mb-3" style="display: inline-block"> <div class="col-sm-3 col-md-4 col-lg-3"> <input class="inputs" type="radio" id="features-1" name="2" value="features-value-1" data-money="0" data-product-money="2500" onclick="PriceCalculator('display', 2500)" > <label class="btn btn-pill" style="display: inline-block;" for="features-1">Durable</label> </div> <div class="col-sm-3 col-md-4 col-lg-3"> <input class="inputs" type="radio" id="features-2" name="2" value="features-value-2" data-money="-1500" data-product-money="2500" onclick="PriceCalculator('display', 1500)" > <label class="btn btn-pill" 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>

Answer 1

如果你有一個像這樣的 object （可以動態改變大小/鍵值）

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

然后可以像這樣動態計算所有值的總和：

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

為了便於理解，可以這樣分解和console.logged

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 

Answer 2

就像上次一樣，委托 - 我正在使用 jQuery 因為您之前的代碼使用了它。 我也會加香草的

 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 class="container"> <div class="row"> <div class="talepler mb-3"> <h4>GB</h4> <div class="row mb-3" style="display: inline-block"> <div class="col-sm-3 col-md-4 col-lg-3"> <input class="inputs" type="radio" id="features-1" name="1" value="features-value-1" data-money="-300" data-product-money="2500"> <label class="btn btn-pill" style="display: inline-block;" for="features-1">16GB</label> </div> <div class="col-sm-3 col-md-4 col-lg-3"> <input class="inputs" type="radio" id="features-2" name="1" value="features-value-2" data-money="-200" data-product-money="2500"> <label class="btn btn-pill" style="display: inline-block;" for="features-2">32GB</label> </div> <div class="col-sm-3 col-md-4 col-lg-3"> <input class="inputs" type="radio" id="features-3" name="1" value="features-value-3" data-money="-50" data-product-money="2500"> <label class="btn btn-pill" style="display: inline-block;" for="features-3">64GB</label> </div> </div> </div> <div class="talepler mb-3"> <h4>DISPLAY</h4> <div class="row mb-3" style="display: inline-block"> <div class="col-sm-3 col-md-4 col-lg-3"> <input class="inputs" type="radio" id="features-1" name="2" value="features-value-1" data-money="0" data-product-money="2500"> <label class="btn btn-pill" style="display: inline-block;" for="features-1">Durable</label> </div> <div class="col-sm-3 col-md-4 col-lg-3"> <input class="inputs" type="radio" id="features-2" name="2" value="features-value-2" data-money="-1500" data-product-money="2500"> <label class="btn btn-pill" 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 class="container"> <div class="row"> <div class="talepler mb-3"> <h4>GB</h4> <div class="row mb-3" style="display: inline-block"> <div class="col-sm-3 col-md-4 col-lg-3"> <input class="inputs" type="radio" id="features-1" name="1" value="features-value-1" data-money="-300" data-product-money="2500"> <label class="btn btn-pill" style="display: inline-block;" for="features-1">16GB</label> </div> <div class="col-sm-3 col-md-4 col-lg-3"> <input class="inputs" type="radio" id="features-2" name="1" value="features-value-2" data-money="-200" data-product-money="2500"> <label class="btn btn-pill" style="display: inline-block;" for="features-2">32GB</label> </div> <div class="col-sm-3 col-md-4 col-lg-3"> <input class="inputs" type="radio" id="features-3" name="1" value="features-value-3" data-money="-50" data-product-money="2500"> <label class="btn btn-pill" style="display: inline-block;" for="features-3">64GB</label> </div> </div> </div> <div class="talepler mb-3"> <h4>DISPLAY</h4> <div class="row mb-3" style="display: inline-block"> <div class="col-sm-3 col-md-4 col-lg-3"> <input class="inputs" type="radio" id="features-1" name="2" value="features-value-1" data-money="0" data-product-money="2500"> <label class="btn btn-pill" style="display: inline-block;" for="features-1">Durable</label> </div> <div class="col-sm-3 col-md-4 col-lg-3"> <input class="inputs" type="radio" id="features-2" name="2" value="features-value-2" data-money="-1500" data-product-money="2500"> <label class="btn btn-pill" 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>