How to get the data-attributes of radio buttons to change a variable

Question

I am creating a form that updates a base price after the customer selects options in radio buttons. The value="" of each one is taken so I am using data-attributes, but the price is not updating after selecting a radio button.

I have tried several ways with the functions but I just can't find what I am doing wrong. I cannot use the innerHTML inside the function, it has to be outside cause later I need to take the result of the selection and sum it to other numbers (but this is another story).

 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> 

Answer 1

This is all you need in the change event handler:

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> 

Answer 2

One approach that works:

 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> 

References:

• Arrow function expressions .
• document.querySelectorAll() .
• document.querySelectorAll() .
• EventTarget.addEventListener() .
• HTMLElement.dataset API .
• NodeList.forEach() .