JavaScript

I want to use JS to display an error message as a placeholder in the Notes <textarea> if the Broken radio button is selected and the <textarea> is empty.

I can successfully select my radio buttons via classname and use a for loop to iterate through them. I’m trying to check the associated <textarea> value in the for loop. However, whenever I check the value of the <textarea> it always comes back as undefined.

Even when I add document.querySelector("textarea").value or ...notes.value[i] == "" in the if statement, the text area value still comes back as undefined. What am I doing wrong?

I currently only have the noteError() function added to the first broken radio button.

function noteError(){
  const broken = document.getElementsByClassName('broken');
  var notes = document.querySelector("textarea");
  
  for(var i = 0; i < broken.length; i++){
    console.log(notes[i]);
    if(broken[i].checked && notes[i] == ""){
      console.log("notes is empty and broken is checked.")
    }
  }
}

<body>
<!-- Template Table -->
<table>
  <caption>
    <h1>Basic Processes</h1>
  </caption>
  <tr>
    <th>Process</th>
    <th>Status</th>
    <th class="notes">Notes</th>
  </tr>
  <tr>
    <td>Document Retrieval</td>
    <td>
      <input type="radio" class="working" name="retrieval" value="working">
      <label for="working">Working</label>&nbsp&nbsp
      <input type="radio" class="broken" name="retrieval" value="broken" onclick="noteError()">
      <label for="broken">Broken</label><br>
    </td>
    <td class="notes"><textarea></textarea></td>
  </tr>
  <tr>
    <td>Viewing Documents</td>
    <td>
      <input type="radio" class="working" name="view_docs" value="working">
      <label for="working">Working</label>&nbsp&nbsp
      <input type="radio" class="broken" name="view_docs" value="broken">
      <label for="broken">Broken</label><br>
    </td>
    <td class="notes"><textarea></textarea></td>
  </tr>
  <tr>
    <td>View Keywords</td>
    <td>
      <input type="radio" class="working" name="keywords" value="working">
      <label for="working">Working</label>&nbsp&nbsp
      <input type="radio" class="broken" name="keywords" value="broken">
      <label for="broken">Broken</label><br>
    </td>
    <td class="notes"><textarea></textarea></td>
  </tr>
  <tr>
    <td>Print Documents</td>
    <td>
      <input type="radio" class="working" name="print" value="working">
      <label for="working">Working</label>&nbsp&nbsp
      <input type="radio" class="broken" name="print" value="broken">
      <label for="broken">Broken</label><br>
    </td>
    <td class="notes"><textarea></textarea></td>
  </tr>
</table>
</body>

Answer

As pointed out, there is an error in your second selector that does not return a list (resulting in ‘undefined’ values when you try to access it as if it was an array) In addition you only put the change listener on the first input, which is not likely to be what you wanted.

My proposal: remove the ‘onclick’ event on the first broken input and rather loop on all inputs to trigger your callback 🙂

function noteError() {
  const broken = document.querySelectorAll('.broken');
  const notes = document.querySelectorAll("textarea");
  
  broken.forEach((brok, index) => {
    const note = notes[index]
    if (brok.checked) {
      note.value = 'error'
    } else {
      note.value = ''
    }
  })
}

const radios = document.querySelectorAll('input[type="radio"]');
radios.forEach(radio => radio.addEventListener('change', noteError))

you can find a working code pen for this one here: https://codepen.io/aSH-uncover/pen/QWrKNJz

JavaScript – How to display error handler message if certain radio button is checked?

Advertisement

Answer