Onclick函數參數

Question

我試圖模擬從0到100的數字，我遇到了問題。 首先，我嘗試使用for循環並將迭代值發送到.innerHTML div但它只顯示最后一個數字。 所以我在網上搜索了一個動畫的javascript計數器，我找到了這個： http ： //jsfiddle.net/jfriend00/aJrj4/ 。

它適用於我的需要，但我不知道如何應用它，以便它可以通過按鈕觸發。 在定義函數時，此腳本使用參數輸入編寫，然后通過在wards之后運行函數來傳遞它們。 我無法弄清楚如何為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腳本中分配按鈕的選項是：

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處理程序相同的功能。 如<button type="button" onclick="animateValue('value', 0, 100, 2000)">Click</button> 。 請檢查這個工作小提琴 。

Answer 2

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） - 並將id="btnId"添加到HTML中的按鈕

我希望結果不錯（從我的手機發布）。

Answer 3

你必須定義obj 。
寫下類似的東西：
var obj = document.getElementById(pCent);
在load_Sim的頂部

Answer 4

如@Hector Barbossa所示 ; 這可以通過在你的html按鈕元素中添加animateValue（'value'，0,100,2000）來實現。 這里的工作示例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();
}