More Javascript bemusement

[Innula Zenovka]

What's wrong with this, please? As far as I can tell from the Firefox console debugger, it's the line

// Get the button element in the cell
          const button = cell.getElementsByTagName("button")[0];

that's the problem, in that the word "cell" in that line that has a squiggly underline.

The error message is "Uncaught TypeError: cell is undefined."

I wrote this with a great deal of help from ChatGPT, so I'm not really sure what I'm doing -- the logic makes sense to me, but I don't understand the syntax too well.

  <script>
      //<![CDATA[
      window.onload = function () {
        // Get the table element
        const table = document.getElementById(\"MyTable\");

        // Get the rows of the table
        const rows = table.getElementsByTagName(\"tr\");

        // Loop through the rows
        for (const i = 0; i < rows.length; i++) {
          // Get the first cell in the row  (this seems to be the problem)
          const cell = rows[i].getElementsByTagName(\"td\")[0];
     
          // Get the button element in the cell
          const button = cell.getElementsByTagName(\"button\")[0];
     
          // Set the button's ID to a unique value
          button.id = \"button\" + i;
        }

        // Loop through the rows
        for (const i = 0; i < rows.length; i++) {
          // Get the first cell in the row
          const cell = rows[i].getElementsByTagName(\"td\")[0];
     
          // Get the button element in the cell
          const button = cell.getElementsByTagName(\"button\")[0];
     
          // Add an event listener to the button
          document.getElementById(button.id).addEventListener(\"click\", function() {
              const currentCell = this.parentNode; // this refers to the button element
              const nextCell = currentCell.nextElementSibling; // get the next cell on the right
       
              let text1 = \"PlaySample~\";
              let text2 =  nextCell.textContent;
              let text = text1+text2;
              console.log(text); // read the contents of the next cell
              const xhttp = new XMLHttpRequest();
              xhttp.open(\"POST\",\""+strURL+"\",true);
              xhttp.send(text);
     
          });
        }
    };
      //]]>
  </script>

ETA: I've tried adding this

        // Loop through the rows
        for (const i = 0; i < rows.length; i++) {
          // Get the first cell in the row
          const cell = rows[i].getElementsByTagName("td")[0];
          alert(i+" "+cell);
      
          // Get the button element in the cell
          const button = cell.getElementsByTagName("button")[0];

and the pop-up says "0 undefined", which presumably means it's not seeing any cells, which puzzles me, because there are certainly some there. It's reading rows.length correctly.

There's a button in the first cell in each row other than the table header.

 

[Innula Zenovka]

Fixed it! It's all a matter of asking ChatGPT the right questions!

  <script>
      //<![CDATA[
      window.onload = function () {
        // Get the table element
        const table = document.getElementById(\"MyTable\");


        // Get a reference to all the buttons in the table
        var buttons = table.getElementsByTagName(\"button\");

        // Loop through the buttons and attach the event listener to each one
        for (var i = 0; i < buttons.length; i++) {
          buttons[i].addEventListener(\"click\", function() {
            const currentCell = this.parentNode; // this refers to the button element
              const nextCell = currentCell.nextElementSibling; // get the next cell on the right
              let text1 = \"PlaySample~\";
              let text2 =  nextCell.textContent;
              let text = text1+text2;
              console.log(text); // read the contents of the next cell
              const xhttp = new XMLHttpRequest();
              xhttp.open(\"POST\",\""+strURL+"\",true);
              xhttp.send(text);          


           });//end event handler
        }//end for loop
         
    };
      //]]>
  </script>

ETA Escaped quote marks because it's LSL for shared media.