Using JS variable to index (pre-loaded) PHP array: "Uncaught Reference Error" even when function isn't called

StackOverflow https://stackoverflow.com/questions/17459209

  •  02-06-2022
  •  | 
  •  

Question

I'm very new to both PHP and JS, so it's very likely that I'm missing something basic here. I understand that PHP runs on the server side and JS runs on the client side. My goal here is to generate an array in PHP, and then have the user's keypress behavior control the display of the elements in the array. Both of those steps work individually, but I run into an Uncaught Reference Error when I try to put everything together. I've read here that Uncaught Reference Errors commonly come from syntax/parsing problems, but I haven't been able to find any syntax errors in the relevant portion of my code.

Below is some schematic code that illustrates the problems that I'm having. You'll notice that the function ShowNextCell() is commented out below, as is the function call on line 20. This code executes as expected: the top row increments whenever you press the space bar, and the bottom row displays the contents of the PHP array. Cool.

But now if you uncomment only the function definition of ShowNextCell (leaving the function call still commented out), you'll find that things fall apart:

  1. The JS console throws an Uncaught Syntax Error, presumably because the embedded PHP isn't evaluating properly inside this function, although the same syntax evaluates perfectly fine in the table's 3rd row.
  2. The JS console also throws an Uncaught Reference Error, such that it now thinks that my setFocus() function is undefined. How is this possible, since the only thing that has changed is defining an unused function (and one that occurs after setFocus() has been defined!?
  3. Furthermore, even if you set focus manually by clicking on the top row, the keyCheck() function also appears to be undefined, as evidenced by another Uncaught Reference Error that occurs any time a key is pressed.

Unfortunately, the ShowNextCell() function is the most critical part of this script for my purposes, so I can't just let it go. I've been working at this all day and I'm completely stymied. I very much hope that you all can help me understand what's going on here. Thanks!

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>

        <script>

        function keyCheck(e)
        {
           var KeyID = (window.event) ? event.keyCode : e.keyCode; 
           switch(KeyID)
           {
              case 32: //spacebar
                videocounter++; 
                document.getElementById("videocounterdisplay").innerHTML=videocounter; //this line works
                //ShowNextCell();
              break;
              }

        }

       function setFocus(){    
            document.getElementById("TopRow").focus();
        }

       /* 
       function ShowNextCell(){

            switch (videocounter)
                {
                case 1: 
                    document.getElementById("1port").innerHTML="<? echo $Stimulus[1]; ?>";
                    break;

                case 2: 
                    document.getElementById("2port").innerHTML='<? echo $Stimulus[2];?>';
                    break;

                case 3: 
                    document.getElementById("3port").innerHTML='<? echo $Stimulus[3];?>';
                    break;

                default:
                    document.getElementById("0port").innerHTML='An error has occurred';
                    break; 
           }        
        }
        */

        var videocounter = 0;

        </script>

    </head>
    <body onload="setFocus()">

        <?php
        $Stimulus = array("a","b","c","d");
        ?>    

        <table border="1">

        <tr id="TopRow" tabindex="-1" onkeydown="keyCheck()"> <!-- Desired behavior: rightmost cell should start at 1 and increment with each press of the spacebar. -->
            <td colspan="3">
                Counter is set to: 
            </td>
            <td id="videocounterdisplay">

            </td>
        </tr>

        <tr> <!-- Desired behavior: an additional cell should be filled in (from left to right) each time the spacebar is pressed.  -->
            <td id="0port">
                <? echo $Stimulus[0]; ?>
            </td>
            <td id="1port">

            </td>
            <td id="2port">

            </td>
            <td id="3port">

            </td>
        </tr>

        <tr> <!-- Desired behavior: just to illustrate that indexing the php array is not the problem. -->  
            <td>
                <? echo $Stimulus[0]; ?>
            </td>
            <td>
                <? echo $Stimulus[1]; ?>
            </td>
            <td>
                <? echo $Stimulus[2]; ?>
            </td>
            <td>
                <? echo $Stimulus[3]; ?>
            </td>

        </tr>
    </table>



    </body>
</html>
Was it helpful?

Solution

In that function you have <? echo $Stimulus[1]; ?> before you've defined the $Stimulus array. Move your array definition to the top of your file. These lines must run before you try to access the array in PHP:

    <?php
        $Stimulus = array("a","b","c","d");
    ?>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top