I'm trying to add aria-required="true" attributes to some form elements from ninja forms in wordpress. I'm using a header/footer script inject plugin. But I can't seem to get my code to actually work. Any help would be greatly appreciated!

/contact/

<script>
function codeAddress() {
    var x = document.getElementsByClassName("nf-element");
    var i;
    for (i = 0; i < x.length; i++) {
        x[i].addAttribute("aria-required", "true");
    }
window.onload = codeAddress
}
</script>

<div class="nf-field-element">
    <input id="nf-field-17" name="nf-field-17" class="ninja-forms-field nf-element" type="text" value="" placeholder="First Name">
</div>

I'm trying to add aria-required="true" attributes to some form elements from ninja forms in wordpress. I'm using a header/footer script inject plugin. But I can't seem to get my code to actually work. Any help would be greatly appreciated!

http://champion.magnet.today/contact/

<script>
function codeAddress() {
    var x = document.getElementsByClassName("nf-element");
    var i;
    for (i = 0; i < x.length; i++) {
        x[i].addAttribute("aria-required", "true");
    }
window.onload = codeAddress
}
</script>

<div class="nf-field-element">
    <input id="nf-field-17" name="nf-field-17" class="ninja-forms-field nf-element" type="text" value="" placeholder="First Name">
</div>

• javascript
• jquery
• html
• wordpress
• wai-aria

2 Answers 2

You need to use setAttribute. Also window.load should be outside the codeAddress function

function codeAddress() {
  var x = document.getElementsByClassName("nf-element");
  var i;
  for (i = 0; i < x.length; i++) {
    console.log(x[i])
    x[i].setAttribute("aria-required", "true");
  }

}
window.onload = codeAddress

<div class="nf-field-element">
  <input id="nf-field-17" name="nf-field-17" class="ninja-forms-field nf-element" type="text" value="" placeholder="First Name">
</div>

try replacing x[i].addAttribute("aria-required", "true"); with x[i].setAttribute("aria-required", "true");