JSFiddle - React, Tailwind, and code Playground

by Angeli Schwartz

HTML

<table>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
<td>Item6</td>
<td>Item7</td>
<td>Item8</td>
<td>Item9</td>
<td>Item10</td>
<td>Item11</td>
<td>Item12</td>
</table>

CSS

td {
    width:165px;
    height:165px;
    background-color:white;
    margin:5px;
    float:left;
    text-align:center;
}

JavaScript

// get all div tags into an array-like structure
tds = document.getElementsByTagName('td');
			
// add an event listener to each div square. the goal is that if a
// user clicks on the 2nd square,
// the alert box should say 2. if the user clicks on the 5th square,
// it should say 5
// though this doesn't happen with the below code. why?
for(i=0;i<divs.length;i++) {
    tds[i].onclick = (function() {
        var myNum = i;
        return function() {
           alert("Link to: " + myNum);
        };
    })();
}