How to input array from php into javascript function and display the output using HTML?

Question

I am trying to take the values from the array in PHP, and pass them onto the JavaScript function. The code below functions as intended. The values are taken from a MySQL database and entered into their respective arrays. [Disclaimer: New to coding]

        echo "<div id='demo'></div>";
        $sql = mysqli_query($conn, "SELECT DISTINCT Safepoint_name,Latitude,Longitude FROM safepoints");
        while($row = mysqli_fetch_array($sql)) {
            $latl[] = $row['Latitude'];
            $long[] = $row['Longitude'];}
        foreach($latl as $name) {
              echo "$name";
        }
        foreach($long as $name) {
          echo "$name";
    } 

The problem I am having is with code as shown below. It does not process and show the output as desired. I want the output to be shown one after the other after subtracting the two arrays. I would prefer if the output could be designed via HTML. What am I supposed to do? [Note: The function is just a trial function just for checking whether it works]

<p id="demo"></p>
<button onclick = "myFunction()">Submit</button>
<script type="text/JavaScript">
let text = "";
  function myFunction() {
  var latitute = <?php echo json_encode($latl); ?>;
  var loni = <?php echo json_encode($long); ?>;
  for (let i = 0; i < latitute.length; i++)
  {
            var x[i] = latitute[i]-loni[i]; 
            text += x[i]+"<br>";  
           
  }
  document.getElementById("demo").innerHTML = text;       
  }
  </script>

Answer 1

I think your problem here is that you are defining variable x in a cycle (first warning something is fishy) and you are assigning a value into it's array index at the same time (which is technically possible, but not recommendable, in PHP, but definitely not in JS where is causes syntax error).

You can skip the variable completely and just generate the text.

for (let i = 0; i < latitute.length; i++) {
    text += (latitute[i]-loni[i]) +"<br>";         
}

Or if you need to keep the result array for later, you should define it as an array before the cycle:

var x = [];
for (let i = 0; i < latitute.length; i++) {
    x[i] = latitute[i]-loni[i]; 
    text += x[i]+"<br>";  
}

---

Update:

 <p id="demo"></p> <button onclick = "myFunction()">Submit</button> <script type="text/JavaScript"> console.log('Preparing JS...'); let text = ""; function myFunction() { console.log('Calculating demo...'); var latitute = [9,8,7]; var loni = [1,2,3]; for (let i = 0; i < latitute.length; i++) { text += (latitute[i] - loni[i]) + "<br>"; } document.getElementById("demo").innerHTML = text; alert('Demo OK'); } </script>

JS runs OK after submit.

Right-Click your page and use "View page source file" to check what PHP generates into the JS - if it's really valid array as in the example above.

Then open Debugger (press F12 in browser) and see Console if there are any Syntax or other errors.

If you are in doubt if JS is running, you can add console.log() and/or alert() into your code (see the example).