如何將數組從 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()添加到代碼中（參見示例）。