I've been attempting to insert images into a table and have had success so far - clicking cycles through the available options. However, I've encountered an issue where the counter is not cell-specific but rather global. Is there a way to create a local variable to track the position of individual cells within the array?
Despite my efforts to create a local variable specific to each cell, it hasn't been effective.
Below is the relevant JavaScript function:
var i = 1;
var table = document.getElementsByTagName('table')[0];
var def = ["tex/white.png", "tex/grass.jpg", "tex/stone.jpg", "tex/water.jpg", "tex/wood.jpg", "tex/lava.jpg"];
table.onclick = function(e) {
var target = (e || window.event).target;
if (target.tagName in { TD: 1, TH: 1 }) {
target.className = "img";
console.log((e || window.event).target);
target.setAttribute('style', 'background-image:' + "url(" + def[i] + ")");
if (i < def.length) {
i++
}
if (i == def.length) {
i = 0;
}
}
};
Here's a functioning fiddle showcasing my progress so far:
https://jsfiddle.net/6L0armd4/
The desired outcome is that the array starts at individual cells and counts specifically for those cells. Currently, it always advances to the next texture even when selecting a different cell.