javascript 循環遍歷按鈕的每個值，得到提交按鈕的返回值

Question

這是我的具有不同值的按鈕。

<div id="RAM_BtnGroup" class="btn-group" role="group" aria-label="Basic example" name='ram'>
    <button type="button" value="8GB" class="btn btn-outline-success">8GB </button>
    <button type="button" value="16GB" class="btn btn-outline-success">16GB </button>
    <button type="button" value="32GB" class="btn btn-outline-success">32GB </button>
    <button type="button" value="64GB" class="btn btn-outline-success">64GB </button>
Price: <span id="totalCost"></span>

所以當我隨機點擊不同的按鈕時，我仍然得到了 8GB 的值。

 var ram = document.querySelector("button[type=button]");
 ram.addEventListener('click', calculateTotal)

那么我應該如何點擊不同的按鈕以獲得不同的值呢？ 我應該得到這樣的按鈕的值嗎？ 但它不是以這種方式工作的。

var ram = document.querySelector("button[value=8GB][value=16GB][value=32GB][value=64GB]");

百萬感謝建議的解決方案，它已經足夠好了，但我的calculateTotal function 仍然沒有指望內存。你能指導我如何解決這個問題。 這是我的代碼。 我很確定 unitcost、additional 和 qty 運行順利，但是在添加 ramcost 以獲得 ram 的值之后，它似乎沒有返回所有項目的任何總價格。

var ram = document.querySelectorAll('button[type="button"]');

    ram.forEach((ramm) => {
      ramm.addEventListener('click', calculateTotal)
    });
        
    var ram_price = {};
    ram_price['8GB'] = 200;
    ram_price['16GB'] = 300;
    ram_price['32GB'] = 400;
    ram_price['64GB'] = 500;

function calculateTotal
() {
  var ramcost = ram_price[ramm.value];
  var unitCost = product_price[productEl.value];
  var additionalCost = size_price[sizeEl.value] || 0;
  var qty = quantityEl.value || 0;

  totalCostEl.textContent = `Total cost: $${(unitCost + additionalCost + ramcost) * qty}`;
}

Answer 1

你能檢查一下這個區別嗎？

查詢選擇器類：

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_queryselector_class

也

查詢選擇器類：

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_document_queryselectorall_class

我認為這會有所幫助。

Answer 2

您必須將click事件附加到每個按鈕。 querySelector()僅返回第一個匹配元素，而querySelectorAll()返回所有匹配元素。 這就是為什么你需要使用后者：

 var ram = document.querySelectorAll("button[type=button]"); ram.forEach((r) => { r.addEventListener('click', calculateTotal) }); function calculateTotal(e) { console.log(e.target.value); }

 <button type="button" value="8GB" class="btn btn-outline-success">8GB </button> <button type="button" value="16GB" class="btn btn-outline-success">16GB </button> <button type="button" value="32GB" class="btn btn-outline-success">32GB </button> <button type="button" value="64GB" class="btn btn-outline-success">64GB </button>

Answer 3

 <div id='container'></div>

我希望這會有所幫助，您可以創建一個 class ButtonToPress，然后創建實例按鈕。 它的工作

 class ButtonToPress { constructor(n) { this.n = n; const button = document.createElement('button'); button.onclick = this.print.bind(this); button.innerText = this.n document.getElementById('container').appendChild(button); } print() { console.log(this.n); } } let buttons = []; for (let i = 8; i < 128; i *= 2) { buttons[i] = new ButtonToPress(i + 'GB'); console.log(buttons[i]); }