单击并从输入标签获取数据集值并显示为HTML

Question

I would like to get the value from the data-price dataset in the radio button after the user has clicked a different option and display it below in the label tag. I am doing something wrong. Any help would be very much appreciated.

Here is my code:

 (function (){ var radios_price = document.getElementById('lbl-011'); console.log(radios_price.dataset.price); for(var i = 0; i < radios_price.length; i++){ radios_price[i].onclick = function(){ document.getElementById('priceLabel').innerText = this.value; } } })(); 

 <input id="lbl-011" class="click_radio checkbox123" data-name="One Gel Pen with One Blue Light" name="product_quantity" data-val="2264" data-price="29" data-qty="1" value="1" type="radio"> <input id="lbl-011" class="click_radio" data-name="Two Gel Pens and One Blue Light" name="product_quantity" data-val="2263" data-price="39" data-qty="2" value="2" type="radio" checked="checked"> <input id="lbl-011" class="click_radio" data-name="Four Gel Pens and One Blue Light with Bonus Mouth Tray" name="product_quantity" data-val="2259" data-qty="4" data-price="49" value="4" type="radio"> <p>Price (data-price):<label id="priceLabel"> $39</label> 

Answer 1

You can't have an id assigned to more than one element. Lots of tutorials always put a descriptive text as both id and name attribute, and in the case of radio buttons you do need them all to have the same name , but the id must be unique to an element.

 (function (){ document.querySelectorAll('#lbl-011 input').forEach((inp) => { inp.onclick = function () { document.getElementById('priceLabel').innerText = "$" + this.dataset.price; }; }); })(); 

 <div id="lbl-011"> <input class="click_radio checkbox123" data-name="One Gel Pen with One Blue Light" name="product_quantity" data-val="2264" data-price="29" data-qty="1" value="1" type="radio"> <input class="click_radio" data-name="Two Gel Pens and One Blue Light" name="product_quantity" data-val="2263" data-price="39" data-qty="2" value="2" type="radio" checked="checked"> <input class="click_radio" data-name="Four Gel Pens and One Blue Light with Bonus Mouth Tray" name="product_quantity" data-val="2259" data-qty="4" data-price="49" value="4" type="radio"> </div> <p>Price (data-price): <span id="priceLabel">$39</span> 

I also turned the <label> into a <span> and move the whitespace outside of it.

Answer 2

As pointed out, it's important not to assign the same ID to multiple elements. That is what classes are used for.

This is also a good case for taking advantage of event delegation. If you wrap all your input elements in a container you can create an event listener there and respond to whichever radio button was clicked. Doing this you also want to check and ensure that it was actually a radio button that was clicked, and not some other empty space in the parent element.

 (function (){ var inputs = document.getElementById('inputCollection'); inputs.addEventListener('click', function(e){ console.log('Collection Clicked'); if(e.target instanceof HTMLInputElement) { // e.target will be the specific input button clicked document.getElementById('priceLabel').innerHTML = ' $' + e.target.dataset.price; } }) })(); 

 <div id="inputCollection"> <input id="lbl-011" class="click_radio checkbox123" data-name="One Gel Pen with One Blue Light" name="product_quantity" data-val="2264" data-price="29" data-qty="1" value="1" type="radio"> <input id="lbl-012" class="click_radio" data-name="Two Gel Pens and One Blue Light" name="product_quantity" data-val="2263" data-price="39" data-qty="2" value="2" type="radio" checked="checked"> <input id="lbl-013" class="click_radio" data-name="Four Gel Pens and One Blue Light with Bonus Mouth Tray" name="product_quantity" data-val="2259" data-qty="4" data-price="49" value="4" type="radio"> </div> <p>Price (data-price):<label id="priceLabel"> $39</label> 

Answer 3

You can collect all input type with help of classname, call in for loop to access each element.

 (function (){ var radios_price = document.getElementsByClassName('click_radio'); for(var i = 0; i < radios_price.length; i++){ radios_price[i].onclick = function(){ document.getElementById('priceLabel').innerText = "$"+this.dataset.price; } } })(); 

 <input id="lbl-011" class="click_radio checkbox123" data-name="One Gel Pen with One Blue Light" name="product_quantity" data-val="2264" data-price="29" data-qty="1" value="1" type="radio"> <input id="lbl-011" class="click_radio" data-name="Two Gel Pens and One Blue Light" name="product_quantity" data-val="2263" data-price="39" data-qty="2" value="2" type="radio" checked="checked"> <input id="lbl-011" class="click_radio" data-name="Four Gel Pens and One Blue Light with Bonus Mouth Tray" name="product_quantity" data-val="2259" data-qty="4" data-price="49" value="4" type="radio"> <p>Price (data-price):<label id="priceLabel">$39</label> 

Answer 4

This should give you the desired output. Like others said, the ID has to be unique. Only the class can be the same.

(function() {
  let radios = document.querySelectorAll('.click_radio');

  radios.forEach((radio) => {
    radio.addEventListener('change', () => {

      // This gives you access to all the data attributes you've declared
      //
      let radioData = radio.dataset;

      document.getElementById('priceLabel').innerText = `$${ radioData.price }`
    })
  })
})()