Блог

Главная - Вопросы по программированию - изменить функцию с onclick на onload

изменить функцию с onclick на onload

#javascript

#javascript

Вопрос:

У меня есть этот индикатор выполнения, который загружается после нажатия. Как мне изменить ее с onclick на load при загрузке страницы?

 <div id="myProgress">
  <div id="myBar">
    <div id="label">10%</div>
  </div>
</div>

<script>
function move() {
  var elem = document.getElementById("myBar");   
  var width = 10;
  var id = setInterval(frame, 1200);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width  ; 
      elem.style.width = width   '%'; 
      document.getElementById("label").innerHTML = width * 1    '%';
    }
  }
}
</script>

Ответ №1:

Вы можете поместить ее в тело, событие onload..

или

Если вы хотите сохранить все на javascript, вы также можете использовать document.addEventListener('DOMContentLoaded', funciton())

пример использования body.onload

 function move() {
  var elem = document.getElementById("myBar");   
  var width = 10;
  var id = setInterval(frame, 1200);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width  ; 
      elem.style.width = width   '%'; 
      document.getElementById("label").innerHTML = width * 1    '%';
    }
  }
}  
 <body onload="move()">
  <div id="myProgress">
    <div id="myBar">
      <div id="label">10%</div>
    </div>
  </div>
</body>

Ответ №2:

Вы можете сделать что-то вроде этого. Поэтому всякий onload раз, когда произойдет событие, ваша функция будет выполнена. PS: — Его always a better approach to keep your javascript code seperate в html (т. Е. Не Использовать атрибуты onload, onclick и т. Д. В тегах html Напрямую, А вместо этого привязывать события к требуемым элементам в вашем коде javascript). Это помогает separating the business logic из кода и всякий раз, когда вам нужно его найти или изменить, comparatively easier to find если вы имеете дело с большим кодом.

 window.onload = function(){
  var elem = document.getElementById("myBar");   
  var width = 10;
  var id = setInterval(frame, 1200);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width  ; 
      elem.style.width = width   '%'; 
      document.getElementById("label").innerHTML = width * 1    '%';
    }
  }
}  
 <body>
  <div id="myProgress">
    <div id="myBar">
      <div id="label">10%</div>
    </div>
  </div>
</body>