單選按鈕和文本輸入的事件監聽器

Question

我有一組單選按鈕和一個文本輸入字段：

<div>
      <input type="radio" value="0.1" id="radioOne"   name="discount"  />
      <label for="radioOne" class="radio">10%</label>
</div>
<div>
      <input type="radio" value="0.2" id="radioTwo"   name="discount" />
      <label for="radioTwo" class="radio">20%</label>
</div>
<div>
      <input type="radio" value="0.3" id="radioThree"  name="discount" checked />
      <label for="radioThree" class="radio">30%</label>
</div>

<input type="number" name="price" id="priceInput" placeholder="Price">

<p id="resultToast"> </p>

我想要由Price * Discount計算的最終價格的結果並更新<p id="resultToast"> </p> 。 所以我做了

const radios = document.querySelector('input[name="discount"]:checked');
const toast = document.querySelector('#resultToast');
const priceIn = document.querySelector("#priceInput");

if (radios) {
  document.querySelectorAll('input[name="discount"]').forEach((elem) => {
    elem.addEventListener("change", function(event) {
       radios.value = event.target.value;
       console.log(radios.value);
        if(priceIn){
          toast.textContent = 'final price:  ' + radios.value * priceIn.value;
        }
    });
  });
}

if(priceIn){
  priceIn.addEventListener('input', updateValue);
}

function updateValue(e) {
  toast.textContent = 'final price:  ' + e.target.value * radios.value;
}

在控制台中，單擊單選按鈕后radios.value未正確更新。 我做錯了什么？

Answer 1

您指的是您在腳本開頭定義的常量。 這將始終為您提供相同的單選按鈕值（在開始時檢查的那個）。 做類似的事情

let discount=document.querySelector("input[name=discount]:checked").value

在您的事件處理程序 function 中獲取單選按鈕組的當前值。

您還可以稍微整理（=縮短）您的代碼，並通過這種方式使其可用於多個輸入部分，見下文：

 function qs(sel,el){return (el||document).querySelector(sel);} function makeInteractive(frmsel){ const frm=qs(frmsel), prc=qs("[name=price]",frm), res=qs(".result",frm); frm.onchange=calc; frm.oninput= calc; function calc(){ res.textContent= (prc.value * qs("[type=radio]:checked",frm).value).toFixed(2); } } makeInteractive("#frm1"); makeInteractive("#frm2");

 <form id="frm1"> the first item... <div> <label><input type="radio" value="0.1" name="discount"/>10%</label> </div> <div> <label><input type="radio" value="0.2" name="discount"/>20%</label> </div> <div> <label><input type="radio" value="0.3" name="discount" checked/>30%</label> </div> <input type="number" name="price" id="priceInput" placeholder="Price"> <p id="resultToast" class="result"> </p> </form> <form id="frm2"> the second item... <div> <label><input type="radio" value="0.1" name="discount"/>10%</label> </div> <div> <label><input type="radio" value="0.2" name="discount"/>20%</label> </div> <div> <label><input type="radio" value="0.3" name="discount" checked/>30%</label> </div> <input type="number" name="price" id="priceInput" placeholder="Price"> <p id="resultToast" class="result"> </p> </form>

Answer 2

只是改變：

const radios = document.querySelector('input[name="discount"]:checked');

至：

const radios = document.querySelectorAll('input[name="discount"]:checked');

請參閱工作片段：

 const radios = document.querySelectorAll('input[name="discount"]:checked'); const toast = document.querySelector('#resultToast'); const priceIn = document.querySelector("#priceInput"); if (radios) { document.querySelectorAll('input[name="discount"]').forEach((elem) => { elem.addEventListener("change", function(event) { radios.value = event.target.value; console.log(radios.value); if(priceIn){ toast.textContent = 'final price: ' + radios.value * priceIn.value; } }); }); } if(priceIn){ priceIn.addEventListener('input', updateValue); } function updateValue(e) { toast.textContent = 'final price: ' + e.target.value * radios.value; }

 <div> <input type="radio" value="0.1" id="radioOne" name="discount" /> <label for="radioOne" class="radio">10%</label> </div> <div> <input type="radio" value="0.2" id="radioTwo" name="discount" /> <label for="radioTwo" class="radio">20%</label> </div> <div> <input type="radio" value="0.3" id="radioThree" name="discount" checked /> <label for="radioThree" class="radio">30%</label> </div> <input type="number" name="price" id="priceInput" placeholder="Price"> <p id="resultToast"> </p>

原因是您存儲了初始

document.querySelector('input[name="discount"]:checked');

作為radios的價值。 現在我們尋找所有，它會相應地改變。