Javascript：調用一個對象數組中的函數

我有一個對象數組，我正在用這些對象構建一個頁面對象具有圖像，圖像將是可點擊的，我要計算每個圖像的點擊次數。我試圖到的onclick功能從每個對象的點擊值分配給「tclicks」比手「tclicks」分別計算點擊次數。我不確定這是否有效。Javascript：調用一個對象數組中的函數

我現在的問題是，當的onclick功能得到執行值顯示爲NaN的。我知道我需要分配起始值點擊。我在各地嘗試過。在對象中，在函數外的函數中。無論是價值沒有計數，或作爲元素被設置爲0 我在哪裏可以指定起始值我得到了一個錯誤？

這是陣列

var things = 
[ 
{img : "cat.jpg", 
tclicks: "cleo_clicks", 
id : "cleo" 
}, 

{img : "shimi.png", 
tclicks: "shimi_clicks", 
id : "shimi" 
} 
]

這是我正在構建的頁（VAR I = 0;我< things.length;我++）{

var x = document.createElement("IMG"); 
x.setAttribute("src", things[i].img); 
x.setAttribute(tclicks, things[i].clicks); 
x.setAttribute("onclick", "countClicks(tclicks)"); 

document.body.appendChild(x); 


}

這是我的onclick功能

function countClicks(clicks){ 

clicks ++; 
console.log(clicks) 

}

來源

2016-02-28 d_wesseling

沒有理由不能分配點擊次數= 0你定義這樣的對象數組：

var things = [ 
    { 
    img: "cat.jpg", 
    tclicks: "cleo_clicks", 
    id: "cleo", 
    clicks: 0 
    }, 
    { 
    img: "shimi.png", 
    tclicks: "shimi_clicks", 
    id: "shimi", 
    clicks: 0 
    } 
];

...但這只是問題的一半。

在點擊遞增功能：

function countClicks(clicks) { 
    clicks++; 
    console.log(clicks); 
}

... JavaScript，因此按值（https://en.wikipedia.org/wiki/Evaluation_strategy#Call_by_value）傳遞函數的參數，你絕不會影響上的任何對象的點擊屬性的變化。

你需要在整個對象的函數來傳遞，並允許它修改屬性值，而不是：

function countClicks(someObject) { 
    someObject.clicks++; 
    console.log(someObject.clicks); 
}

...這意味着你需要改變的功能如何被調用，是這樣的：

x.setAttribute("onclick", "countClicks(things[i])");

注意：上面假設數組是全局的，否則您需要進一步重構。

最後一點說明，調用JS pass-by-value簡化了一點。你可以在這裏深入探討這個問題：Is JavaScript a pass-by-reference or pass-by-value language?

來源

2016-02-28 00:58:44

是的。使用一個對象，不要像onClick那樣寫得很難。這太危險了。你可以覆蓋它。改用eventListener。

function CountClicks(config){ 
    var img  = config.img; 
    var tclicks = config.tclicks; 
    var id  = config.id; 
     var clicks = 0; 
    return{ 
     countUp: function(){ 
      clicks++;   
     }, 
     countDown: function(){ 
      clicks--;   
     }, 
     getCount: function(){ 
      return clicks; 
     } 
    } 
} 


x.counter = new CountClicks(things[i]); 
x.addEventListener('click', function(){this.counter.countUp()});

來源

2016-02-28 01:15:58

我試圖回答的方式只需要對代碼進行增量更改，但這提供了更好的整體解決方案。但是，爲了充分理解，您需要掌握閉包：https：//en.wikipedia.org/wiki/Closure_(computer_programming） –

Javascript：調用一個對象數組中的函數

回答

相關問題