Аргументы функции Onclick

Question

Я пытаюсь имитировать число, отсчитывающее от 0 до 100, и у меня возникают проблемы. Сначала я попытался использовать цикл for и отправить значения итераций в .innerHTML div, но он показал только последнее число. Поэтому я искал в Интернете для анимированного счетчика javascript, и я нашел его: http://jsfiddle.net/jfriend00/aJrj4/.

Это работает для моих нужд, однако я не уверен, как применить это, чтобы он мог быть запущен кнопкой. Этот скрипт записывается с вводом аргументов, когда функция определена, а затем передает их в конце, запустив функцию после операндов. Я не могу понять, как мне ввести аргументы для события onclick? Это была моя попытка, но я продолжаю получать ошибки, в частности, с помощью строки onclick.

var loadSim_btn = document.getElementsByTagName('button')[0]; 

loadSim_btn.onclick=function load_Sim(pCent, 25, 100, 2000); 

function load_Sim (pCent, start, end, duration) { 
    var range = end - start; 
     // no timer shorter than 50ms (not really visible any way) 
     var minTimer = 50; 
     // calc step time to show all interediate values 
     var stepTime = Math.abs(Math.floor(duration/range)); 
     // never go below minTimer 
     stepTime = Math.max(stepTime, minTimer); 
     // get current time and calculate desired end time 
     var startTime = new Date().getTime(); 
     var endTime = startTime + duration; 
     var timer; 

     function run() { 
      var now = new Date().getTime(); 
      var remaining = Math.max((endTime - now)/duration, 0); 
      var value = Math.round(end - (remaining * range)); 
      obj.innerHTML = value; 
      if (value == end) { 
       clearInterval(timer); 
      } 
     } 

     timer = setInterval(run, stepTime); 
     run(); 
    } 

ОТВЕТ: Так от того, что я могу сказать, один вопрос был я забыл строку определения OBJ. Кроме того, Джошуа Дэвисон ответил на мой главный вопрос. «OnClick обратного вызова не содержит аргументов, поэтому мы обернуть вызов функции в анонимную функцию (которая не принимает никаких аргументов)» Так что мои варианты назначения кнопки в Java Script был:

loadSim_btn.onclick=function() { load_Sim(pCent, 25, 100, 2000); }

и используя прослушиватель событий:

loadSim_btn.addEventListener("click", function() { load_Sim(pCent, 25, 100, 2000); }, true);

Answer 1

OnClick обратного вызова не содержит аргументов, поэтому мы обернуть вызов функции в анонимную функцию (которая не принимает никаких аргументов)

loadSim_btn.onclick=function() { load_Sim(pCent, 25, 100, 2000); } 

Могу ли я также рекомендую вам использовать обработчики событий, а не использовать OnClick

loadSim_btn.addEventListener("click", function() { load_Sim(pCent, 25, 100, 2000); }, true); 

Наконец, вместо использования getElementsByTagName(...)[0], то предпочтительнее использовать getElementById("btnId"), если это возможно (только один элемент должен иметь этот идентификатор) - и добавить id="btnId" к кнопке в HTML

Я надеюсь, что это оказывается OK (проводка с телефона).

Answer 2

Добавить кнопку и приложить ту же функцию, что и обработчик onclick. Как <button type="button" onclick="animateValue('value', 0, 100, 2000)">Click</button>. Пожалуйста, проверьте эту работу Fiddle.

Answer 3

Вы должны определить obj.
Написать что-то вроде:
var obj = document.getElementById(pCent);
В верхней части load_Sim

Answer 4

Как указано @Hector Barbossa; это можно сделать, добавив animateValue ('значение', 0, 100, 2000) в элемент html кнопки. Рабочий пример здесь JSFiddle.

HTML:

<div id="value">0</div> 
<button type = "button" onclick = "animateValue('value', 0, 100, 20000)">Click</button> 

CSS:

#value { 
    font-size: 100px; 
} 

Javascript:

function animateValue(id, start, end, duration) { 

    var obj = document.getElementById(id); 
    var range = end - start; 
    var minTimer = 50; 
    var stepTime = Math.abs(Math.floor(duration/range)); 

    stepTime = Math.max(stepTime, minTimer); 

    var startTime = new Date().getTime(); 
    var endTime = startTime + duration; 
    var timer; 

    function run() { 
     var now = new Date().getTime(); 
     var remaining = Math.max((endTime - now)/duration, 0); 
     var value = Math.round(end - (remaining * range)); 
     obj.innerHTML = value; 
     if (value == end) { 
      clearInterval(timer); 
     } 
    } 

    timer = setInterval(run, stepTime); 
    run(); 
}