I'm currently working on placing multiple images on a grid in the center of the page and would like to include a function that triggers when each individual image is clicked. The images are dynamically created using JavaScript and inserted into the document. Could the issue be that these images are not yet fully 'ready' or something else?
function placePieces() {
for (var i = 0; i < setup.length; i++) {
if ((setup[i]+'' == "undefined")) {continue;}
var element = document.createElement("img");
element.src = "Images/" + pieces[Object.keys(pieces)[setup[i]]] + ".png";
element.style.width = "10vh";
element.style.height = "10vh";
element.style.marginTop = (Math.floor(i/8) * 10) + "vh";
element.style.marginLeft = "calc(((100vw - 80vh)/2) + " + (10 * (i%8) - 1) + "vh)";
element.style.zIndex = 10;
element.style.position = "absolute";
element.id = i+1;
document.body.innerHTML = "\n" + element.outerHTML + document.body.innerHTML;
console.log(element.outerHTML)
var nelement = document.getElementById(i+1);
console.log(nelement)
nelement.addEventListener("click",highlight);
}
}
placePieces()
function highlight(n) {
console.log(n)
n = n.currentTarget.myParam;
if (setup[n] == 0 || setup[n] == 6) {
var moves = [];
var m = n
while (True) {
if (!(Math.floor((m-9)/8)<=0)) {
console.log("test")
}
}
}
}
The second function is still a work in progress but it isn't producing the expected results.