Как сделать чтобы скрипт выполнялся при загрузке страницы?

Question

Есть много <input type="hidden"> и скрипт, который делает что-то очень важное )) За скрипт спасибо Vladimir Gonchar. Но как сделать чтобы скрипт выполнялся при загрузке страницы, а не при изменении input-ов?

        addEventListener('input', (e) => {
          let progressEl = document.getElementsByClassName(e.target.id)[0];
          if (progressEl) {
            progressEl.setAttribute('aria-valuenow', e.target.value);
            progressEl.style.width = `${e.target.value}`;
            progressEl.innerHTML = e.target.value;
          }
        });

<div class="progress mb-1" style="height:0.5rem">
    <input type="hidden" class="localstoragesave" id="hodba-2023-01-03" value="16603" />
    <div class="progress-bar bg-success hodba-2023-01-03" role="progressbar" style="width: 0; font-size: 0.5rem;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="20000" data-den="03.01.23 — ">0</div>
</div>

<div class="progress mb-1" style="height:0.5rem">
    <input type="hidden" class="localstoragesave" id="hodba-2023-01-02" value="10463" />
    <div class="progress-bar bg-success hodba-2023-01-02" role="progressbar" style="width: 0; font-size: 0.5rem;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="20000" data-den="02.01.23 — ">0</div>
</div>

<div class="progress mb-1" style="height:0.5rem">
    <input type="hidden" class="localstoragesave" id="hodba-2023-01-01" value="8589" />
    <div class="progress-bar bg-success hodba-2023-01-01" role="progressbar" style="width: 0; font-size: 0.5rem;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="20000" data-den="01.01.23 — ">0</div>
</div>

Answer 1

Нужно использовать событие DOMContentLoaded

document.addEventListener("DOMContentLoaded", function(event) {
    let progressEl = document.getElementById(СЮДА_ВПИСАТЬ_ID);        
    
    if (progressEl) {
        let progressValue = progressEl.value;
        progressEl.setAttribute('aria-valuenow', progressValue);
        progressEl.style.width = progressValue;
        progressEl.innerHTML = progressValue;
    }
});

Данный код расположить после первого, который навешивает события addEventListener('input'

document.addEventListener("DOMContentLoaded", function(event) {
    document.querySelectorAll('.progress input[type="hidden"]').forEach((el) => {
        el.dispatchEvent(new Event('input', {bubbles:true}));
    });
});

БЛОГ НА HUSL

Как сделать чтобы скрипт выполнялся при загрузке страницы?

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