javascript, css, не выполняется функция

Question

Пытаюсь сделать progressive bar (индикатор выполнения), но функция отказывается работать. Подскажите пожалуйста, в чем проблема как ее запустить? Спасибо

function run() {
  // body...
  const progress = document.querySelector('.progress-done');
  progress.style.width = progress.getAttribute('data-done') + '%';
  progress.style.opacity = 1;
}

html,
:root {
  --background: rgba(0, 214, 170, 0.95);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #222;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
}

.container {
  max-width: 1100px;
  margin: auto;
}

#skills {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 75vh;
  margin: 0;
}

#skills .progress {
  height: 30px;
  width: 300px;
  background-color: #d8d8d8;
  border-radius: 20px;
}

#skills .progress-done {
  height: 100%;
  width: 200px;
  background: linear-gradient(to left, #F2709C, #FF9472);
  box-shadow: 0 3px 3px -5px #F2709C, 0 2px 5px #F2709C;
  opacity: 0;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

<section>
  <div id="skills">
    <div class="container">
      <h1>Custom Progress Bar</h1>
      <div class="progress">
        <div class="progress-done" data-done="70">
          70%
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

JS файл можно подключать как в блок head так и в body

Если подключаешь в head то самая стартовая функция (инициализация) должна быть обвернута в:

window.onload=()=>{
    // етот код [или] просто код можно писать здесь
};

(()=>{
    const progress = document.querySelector('.progress-done');
    
    progress.style.width = progress.getAttribute('data-done') + '%';
    progress.style.opacity = 1;
})();

html,
:root {
    --background: rgba(0, 214, 170, 0.95);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #222;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
}

.container {
    max-width: 1100px;
    margin: auto;
}

#skills {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 75vh;
    margin: 0;
}

#skills .progress {
    height: 30px;
    width: 300px;
    background-color: #d8d8d8;
    border-radius: 20px;
}

#skills .progress-done {
    height: 100%;
    width: 200px;
    background: linear-gradient(to left, #F2709C, #FF9472);
    box-shadow: 0 3px 3px -5px #F2709C, 0 2px 5px #F2709C;
    opacity: 0;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

<section>
    <div id="skills">
        <div class="container">
            <h1>Custom Progress Bar</h1>
            <div class="progress">
                <div class="progress-done" data-done="70">
                    70%
                </div>
            </div>
        </div>
    </div>
</section>

БЛОГ НА HUSL

javascript, css, не выполняется функция

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