如何获取单选按钮的数据属性以更改变量

我正在创建一个表单，该表单在客户选择单选按钮中的选项后更新基本价格。每个value=""都被采用，所以我使用数据属性，但在选择单选按钮后价格没有更新。

我已经尝试了几种功能方法，但我就是找不到我做错了什么。我不能在函数内部使用innerHTML，它必须是外部的，因为稍后我需要获取选择的结果并将其汇总到其他数字(但这是另一回事(。

var hammer = 0;
function productCost() {
  document.getElementById("_form_29_").onchange = function() {
    hammer = document.querySelector('input[name = field]:checked').getAttribute('data-cost');
  };
}
productCost();
document.getElementById("options_cost").innerHTML = productCost();

<form method="POST" action="https://tmgmfg.activehosted.com/proc.php" id="_form_29_" class="build-form" validate>
  <label><input type="radio" name="field" value="Manual SPT Hammer" data-cost="0"/>Manual SPT Hammer</label>
  <label><input type="radio" name="field" value="Automatic SPT Hammer" data-cost="2000">Automatic SPT Hammer</label>
</form>
<div id="options_cost"></div>

这就是您在change事件处理程序中所需要的全部内容：

document.getElementById("options_cost").innerHTML = document.querySelector("input[name=field]:checked").getAttribute("data-cost");

window.onload = function() {
  document.getElementById("_form_29_").onchange = function() {
    document.getElementById("options_cost").innerHTML = document.querySelector("input[name=field]:checked").getAttribute("data-cost");
  };
};

<form method="POST" action="https://tmgmfg.activehosted.com/proc.php" id="_form_29_" class="build-form" validate>
<label><input type="radio" name="field" value="Manual SPT Hammer" data-cost="0"/>Manual SPT Hammer</label>
<label><input type="radio" name="field" value="Automatic SPT Hammer" data-cost="2000">Automatic SPT Hammer</label>
</form>
<div id="options_cost"></div>

一种有效的方法：

function productCost () {
  // retrieving the relevant checked <input> element:
  let hammer = document.querySelector('input[name=field]:checked')
    // using the HTMLElement.dataset API to retrieve
    // the 'data-cost' attribute-value:
    .dataset.cost;
  // finding the element with id="options_cost", assigning the
  // 'hammer' variable as its textContent:
  document.getElementById('options_cost').textContent = hammer;
}
// retrieving all <input> elements with name="field":
document.querySelectorAll('input[name=field').forEach(
  // using NodeList.forEach() to iterate over the
  // NodeList returned from document.querySelectorAll(),
  // using an Arrow function expression (as we don't need
  // to access 'this'):
  (inputElement) => {
    // inputElement is the current Node of the NodeList
    // we're iterating over; and here we use the
    // EventTarget.addEventListener() method to bind
    // the productCost() function - note the deliberate
    // lack of parentheses - as the event-handler for
    // the 'change' event:
    inputElement.addEventListener('change', productCost);
  });

#options_cost:empty::before {
  content: 'Please select an item above.';
  color: #999;
}

<form method="POST" action="https://tmgmfg.activehosted.com/proc.php" id="_form_29_" class="build-form" validate>
  <label><input type="radio" name="field" value="Manual SPT Hammer" data-cost="0"/>Manual SPT Hammer</label>
  <label><input type="radio" name="field" value="Automatic SPT Hammer" data-cost="2000">Automatic SPT Hammer</label>
</form>
<div id="options_cost"></div>

引用：

箭头函数表达式。
document.querySelectorAll() .
document.querySelectorAll() .
EventTarget.addEventListener() .
HTMLElement.dataset API。
NodeList.forEach() .

相关内容

最新更新

热门标签：