Запуск скрипта JS сразу после загрузки страницы

Рейтинг: 0Ответов: 1Опубликовано: 24.04.2023

Есть большая форма на странице, внутри которой помимо прочего есть select и 2 span.

При выборе одной из опций select'a span'ы заполняются Фамилией и Именем руководителя. Все это работает при смене option, но не работает сразу при загрузке страницы.

А нужно, чтобы при загрузке страницы при выбранном по умолчанию варианте А оба span сразу были заполнены - "Иванов Иван", это нужно для дальнейшей отправки формы, если пользователь не будет менять варианты в select.

Остальные скрипты написаны на чистом JS. По причине того, что скриптов много, использовать window.onload не могу.
Как мне правильно запустить этот скрипт, чтобы это работало сразу после загрузки страницы?

    var club = document.getElementById('clubName');

    function fillcoach() {

    if (club.value == 'А') {
        document.getElementById('coach_family').textContent = 'Иванов';
        document.getElementById('coach_name').textContent = 'Иван';
    }  else if (club.value == 'Б') {
    document.getElementById('coach_family').textContent = 'Петров';
        document.getElementById('coach_name').textContent = 'Петр';
  }

    }   
.coach {
  border: 1px solid green;
  width: 100px;
  font-size:16px;
  padding: 3px;
  margin-left: 10px;
}
<select class="select" id="clubName">
  <option value="А">А</option>
  <option value="Б">Б</option>
</select>

<span class ="coach" id="coach_family" value=""></span>

<span class ="coach" id="coach_name" value=""></span>

javascript html
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

onload не работает для элемента select, т.к. он ничего не загружает. Чтобы решить проблему, как писали в комментарии, нужно скрипт поместить вниз страницы, чтобы на момент выполнения скрипта DOM уже существовал, и после объявления функции fillcoach() сразу ее вызывать.

var club = document.getElementById('clubName');

function fillcoach() {

  if (club.value == 'А') {
    document.getElementById('coach_family').textContent = 'Иванов';
    document.getElementById('coach_name').textContent = 'Иван';
  } else if (club.value == 'Б') {
    document.getElementById('coach_family').textContent = 'Петров';
    document.getElementById('coach_name').textContent = 'Петр';
  }

};

fillcoach()
.coach {
  border: 1px solid green;
  width: 100px;
  font-size: 16px;
  padding: 3px;
  margin-left: 10px;
}
<select class="select" id="clubName">
  <option value="А">А</option>
  <option value="Б">Б</option>
</select>

<span class="coach" id="coach_family" value=""></span>

<span class="coach" id="coach_name" value=""></span>