Replace text with empty string by class in html using javascript

Question

I'm trying to create a js function which removes text onclick from a certain class of fields in HTML.

When checking Yes in the trigger (onclick), the function is not clearing the data in my target.

This works if I substitute id for class where appropriate, but I need the function to affect 10+ html fields. Can this be accomplished by class?

Note: There is a little extra in the HTML below because there is another js function run onclick in my trigger. I've removed the divs, so it's less cluttered.

JavaScript

function eraseText() {
  document.getElementsByClassName("eraseonupdate").value = "";
}

HTML

Trigger:

<input type="radio" name="exceptionupdate" class="_exceptionupdate" value="Yes" onclick="ExceptionUpdate();eraseText()" />Yes <input type="radio" name="exceptionupdate" class="_exceptionupdate" value="No" onclick="ExceptionUpdate()" />No

Target:

<input type="text" name="Approver" size="20" class="eraseonupdate">

Answer 1

You need to iterate the result of .getElementsByClassName(), to make that easier you can convert it to an array, like so:

function eraseText() {
  var elements = document.getElementsByClassName('eraseonupdate');
  
  Array.prototype.slice.call(elements).forEach(function(el) {
    el.value = '';
  });
  
  // if you do not need old browsers to work you could do
  /*
  [...elements].forEach(el => {
    el.value = '';
  });
  */
}

function ExceptionUpdate() {
  return;
}

<input type="text" name="Approver" size="20" class="eraseonupdate">

<label><input type="radio" name="exceptionupdate" class="_exceptionupdate" value="Yes" onclick="ExceptionUpdate();eraseText()" />Yes</label>

<label><input type="radio" name="exceptionupdate" class="_exceptionupdate" value="No" onclick="ExceptionUpdate()" />No</label>