0

I'm creating an ESP8266 server with Arduino.

The code part is OK but when comes to JavaScript and HTML, things get a little problematic. The problem is that when the onClickEvent() function sends the last number, instead of the number of the row and column. Here's an example:

The javaScript part:

<script>
    var table = document.getElementById("tableID");
    var lastTable = table;
    if (table != null) {
        for (var i = 0; i < table.rows.length; i++) {
            for (var j = 0; j < table.rows[i].cells.length; j++) {
                table.rows[i].cells[j].onclick = function () {
                    tableText(this);
                    sendData(i, j);
                };
            }

        }
    }

    function sendData(i, j) {
        var lpathname = location.pathname;
        if (lpathname.indexOf("/X") > 0) {
            location.href -= lpathname.slice(-6);
        }
        // location.href += ("/X" + i + "&Y" + j);
        console.log("/X" + i + "&Y" + j);
    }

    function tableText(tableCell) {
        if (tableCell.classList.contains("parede")) {

        } else if (tableCell.classList.contains("robo")) {
            lastTable.setAttribute("class", "");
        } else {
            tableCell.setAttribute("class", "destino");
            lastTable.setAttribute("class", "");
            lastTable = tableCell;
        }
    }
</script>

This is the HTML code:

<!DOCTYPE HTML>
<html>

    <head>
        <meta charset=\"UTF-8\">
        <title>Controle do Robô</title>
    </head>

    <body>
        <h1>Controle do Robô</h1>
        <div>
            <div class="container">
                <div class="col">
                    <p class="parede" id="texto">Parede</p>
                    <p class="obstaculo" id="texto">Obstaculo</p>
                    <p class="robo" id="texto">Robo</p>
                    <p class="destino" id="texto">Destino</p>
                </div>
            </div>
            <table id="tableID">
                <tbody>
                    <tr id="X0">
                        <td id="Y0">01</td>
                        <td id="Y1">02</td>
                        <td id="Y2">03</td>
                    </tr>
                    <tr id="X1">
                        <td id="Y0">11</td>
                        <td id="Y1">12</td>
                        <td id="Y2">13</td>
                    </tr>
                    <tr id="X2">
                        <td id="Y0">21</td>
                        <td id="Y1">22</td>
                        <td id="Y2">23</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

The result from JS when clicking in any cell of the table is always the max number (in the resumable example 3 - in the complete version is 10 because I use a 10x10 table)

//This is always the output
console.log("/X" + i + "&Y" + j); == /X3&Y3    

I wanna the code to return /X2&Y1 for example, or /X0&Y3. Can anyone help me to correct this?

Mario SG
  • 161
  • 7
  • The fastest fixes is to change the `var` in for loops to `let`. Give a look to [this question](You have problems with https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) – TheGr8_Nik Nov 02 '19 at 22:34
  • Thank You! I was thinking that was the problem but I had forgotten about the let. Thanks!! – Henrique Fonseca Veloso Nov 02 '19 at 23:02

0 Answers0