javascript - 使用单选按钮进行计算

Question

我正在尝试使用单选按钮创建此 JavaScript 计算。因此，如果用户选中“送货到家庭地址”，则 5.99 英镑的值(value)将被添加到总计框中，但如果用户选择其他单选按钮，则不会显示任何价格。我对 JavaScript 还很陌生，所以可能会有一些错误，但如果您能帮助我，我将不胜感激

<section id="collection">
                <h2>Collection method</h2>
                <p>Please select whether you want your chosen event ticket(s) to be delivered to your home address (a charge applies for this) or whether you want to collect them yourself.</p>
                <p>
                Home address - &pound;5.99 <input type="radio" name="deliveryType" value="home" data-price="5.99" checked>&nbsp; | &nbsp;
                Collect from ticket office - no charge <input type="radio" name="deliveryType" value="ticketOffice" data-price="0">
                </p>
            </section>
Total <input type="text" name="total" size="10" readonly>

JavaScript

let totalPrice = 0;
var RadioBtn = document.getElementById ('input[name=deliveryType]');

radioBtn.addEventListener("click", function() {
  if(radioBtn.clicked) {
   totalPrice += parseFloat(radioBtn.dataset.price)
  total.value = " + totalPrice;
}
}

Answer 1

以下是我对所提供代码的观察:

1. radioBtn 变量是用 Pascal Case 声明的(第一个字母大写)，因此不会在代码中引用它，因为其他行使用驼峰命名法(以小写字母开头)。更改为驼峰式命名法并在整个代码中坚持下去。
2. 您的选择器 - getElementById 用于 Id，它将返回一个元素，因为您正在传递查询选择器'input[name=deliveryType]' 相反，代码将找不到您正在寻找的元素
3. 由于您希望向单选按钮添加点击事件，因此您可以使用 getElementsByName 并提供 radio 的名称纽扣。然后迭代结果元素以应用单击事件...这样两个 radio 都会调用单击按钮。
4. 无需在点击事件中检查是否被点击，你已经知道了仅在单击时调用，您可以添加事件参数获取要应用的点击目标及其信息根据需要进行。

示例:

    let totalPrice = 0;
    let radioBtns = document.getElementsByName('deliveryType');
    let totalEl = document.getElementsByName ('total')[0];


    radioBtns.forEach(function(element, index){
      element.addEventListener("click", function(event){
       totalPrice += parseFloat(event.target.dataset.price); //remove += if the price should be the same everytime, replace with = or it will add the number to the total when clicked
       totalEl.value = totalPrice  +  " totalPrice";
     });
  });

https://jsfiddle.net/dn4x7oy9/8/