Событие привязано к нескольким элементам, но в event.target всегда находится только первый элемент

Question

Работаю над сайтом для научной работы. С js знаком очень плохо, но пришлось разбираться. У меня на сайте есть несколько карточек с заданиями и нужна возможность давать на них ответ, прикрепляя файл и при этом должно вызываться событие, в котором меняется состояние ответа. Смог привязать ко всем элементам одно и тоже событие, но несмотря на то какую на какой карточке я нажму "дать ответ" в event.target попадает только первая.

var elements = document.querySelectorAll(".inputFile");
elements.forEach(function(item){
  item.addEventListener("change", function(){
    alert(event.target.closest('.mainPlace').textContent);
    event.target.closest('.answer').getElementsByClassName('answerChange')[0].textContent = "Изменить ответ";
    event.target.closest('.answer').getElementsByClassName('answerStatus')[0].textContent = "Ответ отправлен";
  })
});

  <div style="display: flex; flex-flow: row wrap; height: 30px;">
    <div style="width: 80%; font-size: 14px;">
      <div>
        <?php echo $date.'&nbsp&nbsp&nbsp'.$subject;
         if($_SESSION['user']['status'] != "Teacher")
         {
           echo '&nbsp&nbsp&nbsp'.$teacher;
         }
        ?>
      </div>
    </div>
    <div style="width: 20%; font-size: 14px;">
      <div style="float: right;"><?php echo 'Оценка: '.$value?></div>
    </div>
  </div>

  <div style="border-top: 1px solid #111"></div>

  <div style="display: flex; flex-flow: row wrap; height: 50px;">
    <div style="width: 85%; font-size: 14px;">
      <a href="<?php echo $filePath?>" download><?php echo $fileName?></a>
    </div>
    <?php if($_SESSION['user']['status'] == "Student"):?>
    <div style="width: 15%; font-size: 14px; border-left: 1px solid #111">
      <div style="float: right; margin: 0px;">
        <label for="answer" class="addAnswer">
          <?php if($isAnswer):?>
            <div class="answerStatus">Ответ отправлен</div>
            <div class="answerChange">Изменить ответ</div>
            <input type="file" id="answer"  name="answer" class="inputFile">
          <?php endif;?>
          <?php if(!($isAnswer)):?>
            <div class="answerStatus">Ответ не отправлен</div>
            <div class="answerChange">Добавить ответ</div>
            <input type="file" id="answer"  name="answer" class="inputFile">
          <?php endif;?>
        </label>
      </div>
    </div>
    <?php endif;?>

    <?php if($_SESSION['user']['status'] == "Teacher"):?>
    <div style="width: 15%; font-size: 14px; border-left: 1px solid #111">
      <div style="float: right; margin: 0px;">
        <a href="answers.php">Ответы</a>
      </div>
    </div>
    <?php endif;?>
  </div>
</div>```

Answer 1

Ваша ошибка состоит в том, что вы указывали неправильный селектор в методе closest(). У вас нет элемента с классом answer, зато есть класс addAnswer.

Так же, нет необходимости выбирать элемент из события, т.к. сам элемент известен(при создании события, это item из цикла выше)

const elements = document.querySelectorAll(".inputFile");
elements.forEach(function(item) {
  item.addEventListener("change", function() {
    const container = item.closest('.addAnswer')
    container.getElementsByClassName('answerChange')[0].textContent = "Изменить ответ";
    container.getElementsByClassName('answerStatus')[0].textContent = "Ответ отправлен";
  })
});

<div>
  <div>
    <label for="answer" class="addAnswer">
      <div class="answerStatus">Ответ не отправлен</div>
      <div class="answerChange">Добавить ответ</div>
      <input type="file" id="answer"  name="answer" class="inputFile">
    </label>
  </div>
</div>
<div>
  <div>
    <label for="answer" class="addAnswer">
      <div class="answerStatus">Ответ не отправлен</div>
      <div class="answerChange">Добавить ответ</div>
      <input type="file" id="answer"  name="answer" class="inputFile">
    </label>
  </div>
</div>
<div>
  <div>
    <label for="answer" class="addAnswer">
      <div class="answerStatus">Ответ не отправлен</div>
      <div class="answerChange">Добавить ответ</div>
      <input type="file" id="answer"  name="answer" class="inputFile">
    </label>
  </div>
</div>
<div>
  <div>
    <label for="answer" class="addAnswer">
      <div class="answerStatus">Ответ не отправлен</div>
      <div class="answerChange">Добавить ответ</div>
      <input type="file" id="answer"  name="answer" class="inputFile">
    </label>
  </div>
</div>

Если хочется оставить выбор элемента из события, то можно сделать так:

  elements.forEach(function(item){
    item.addEventListener("change", function(event){
      const container = event.target.closest('.addAnswer')
      container.getElementsByClassName('answerChange')[0].textContent = "Изменить ответ";
      container.getElementsByClassName('answerStatus')[0].textContent = "Ответ отправлен";
    })
  });

И еще - на странице id Элемента должно быть уникальным. У вас input имеют одинаковый id

БЛОГ НА HUSL

Событие привязано к нескольким элементам, но в event.target всегда находится только первый элемент

Ответы (1 шт):