使用 querySelector 将 For 和 id 添加到元素

Question

I have this fiddle

https://jsfiddle.net/z40j1gtp/1/

where i am trying to add the for to the parent node and then id to the checkbox so i can use them for accessibility, here ismy code

<div class="cell">
  <span class="radio">
    <label role="radio" tabindex="0" class="el-radio" data-id="101148" aria-label="A_101148">
      <span class="el-radio__input">
        <span class="el-radio__inner"></span>
        <input type="radio" aria-hidden="true" tabindex="-1" class="el-radio__original" value="2">
      </span>
      <span class="el-radio__label">2</span>
    </label>
  </span>
</div>

my JS Code

document.querySelectorAll('.el-input__original').forEach((element, index) => {
      
var id = element.parentNode.parentNode.getAttribute('data-id')
  // element.setAttribute('id','A_'+id)
})

but its not adding it, i even tried adding the console in fiddle but its not showing up

Answer 1

please first try to check if your selector is valid.

document.querySelectorAll('.el-input__original')

will return an empty NodeList as the element does not exist.

i think you are trying to access "el-radio__original" class instead of el-input

please try

document.querySelectorAll('.el-radio__original')