如何将数组从 php 输入 javascript 函数并使用 HTML 显示输出？

Question

我正在尝试从 PHP 中的数组中获取值，并将它们传递给 JavaScript 函数。 下面的代码按预期运行。 这些值取自 MySQL 数据库并输入到它们各自的数组中。 [免责声明：编码新手]

        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";
    } 

我遇到的问题是代码如下所示。 它不会根据需要处理和显示输出。 我希望在减去两个数组后一个接一个地显示输出。 如果输出可以通过 HTML 设计，我会更喜欢。 我应该做些什么？ [注：该功能只是一个试用功能，只是为了检查它是否有效]

<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

我认为你的问题是你在一个循环中定义变量x （第一个警告是可疑的）并且你同时为它的数组索引分配一个值（这在技术上是可能的，但在 PHP 中是不推荐的，但是绝对不会在 JS where is 导致语法错误）。

您可以完全跳过变量而只生成文本。

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

或者，如果您需要保留结果数组以供以后使用，则应在循环之前将其定义为数组：

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

---

更新：

 <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 提交后运行正常。

右键单击您的页面并使用“查看页面源文件”来检查 PHP 生成到 JS 中的内容 - 如果它确实是上面示例中的有效数组。

然后打开调试器（在浏览器中按 F12）并查看控制台是否有任何语法或其他错误。

如果您不确定 JS 是否正在运行，您可以将console.log()和/或alert()添加到代码中（参见示例）。