我正在嘗試使用php 創建一個網頁，在“連續文字框”類別（由我的類別定義）的元素上，單擊時必須啟動一個Javascript 函數，該函數應該更改另一個函數的內容id“ harta-modal」的元素，但這不會發生。我不斷收到相同的錯誤，即“未捕獲的類型錯誤：無法設置未定義的屬性（設置'innerHTML'）”，即使該函數是在應該更改的元素之後聲明的，以及我在其中編寫的控制台日誌函數不傳回null。 我做錯了什麼？
<?php
session_start();
if (!isset($_SESSION['username']) && !isset($_SESSION['password'])){
echo "<script>location.href='loginPage.html'</script>";
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Crisis Containment Service</title>
<link rel="icon" href="https://www.pinclipart.com/picdir/middle/344-3442781_tornado-icon-animated-natural-disaster-png-clipart.png">
<link href="style1.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="titlu-pagina">Crisis Containment Service Web App</h1>
<div id="slider">
<figure>
<img src="Images/wildfire.jpg">
<img src="Images/furtuna.jpg">
<img src="Images/hurricane.jpg">
<img src="Images/landslide.jpg">
<img src="Images/tornada.jpg">
<img src="Images/vulcan.jpg">
<img src="Images/inundatie.jpeg">
<img src="Images/wildfire.jpg">
</figure>
</div>
<div id="text-box">
<?php
$url = 'http://localhost/Proiect/API/getVerifiedEvents.php';
$curl = curl_init($url);
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
$headers = array("Accept: application/json",);
curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
$resp = curl_exec($curl);
curl_close($curl);
$json = json_decode($resp);
$i = 0;
while($i < sizeof($json)){
//if (substr($json[$i]->name, 0, 5) == date("m-d")){
?>
<div class="continut-text-box" id="open" onclick="makeMap(<?php echo $json[$i]->longitude?>, <?php echo $json[$i]->latitude?>)"><h2><?php echo $json[$i]->description;?></h2></div>
<?php /*}*/$i = $i + 1;}?>
</div>
<div class="modal-container" id="modal-container">
<div class="modal">
<!--<h1>Hi!</h1>!-->
<div id="harta-modal"><p>te rog functioneaza<!--to be generated by javascript!--></div>
</div>
<button id="close">X</button>
</div>
<iframe id="harta-europa" src="https://www.google .com/maps/embed?pb=!1m18!1m12!1m3!1d47139330.24912588!2d-12.8611109417314!3d43.85258716626324!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46ed8886cfadda85%3A0x72ef99e6b3fcf079!2sEurope!5e0!3m2!1sen!2sro!4v1649962131724!5m2!1sen!2sro" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<button id="buton-about" onclick="window.location.href='about.html';">About</button>
<button id="buton1" onclick="myFunction1()">Log Out</button>
<button id="buton2" onclick="myFunction2()">Report Event</button>
<select id="type-event">
<option selected>All</option>
<option>Tornadoes</option>
<option>Hurricanes</option>
<option>Floods</option>
<option>Wildfires</option>
<option>Earthquakes</option>
<option>Droughts</option>
<option>Volcanic erruptions</option>
<option>Tsunamis</option>
<option>Landslides</option>
<option>Sink holes</option>
</select>
<input type="datetime-local" name="datetime" id="datetime">
<script src="myScript.js"></script>
<script>
function myFunction1() {
location.href='sessionDestroy.php';
}
function myFunction2() {
location.href='reportEventPage.php';
}
function makeMap(longitude, latitude){
console.log(document.getElementById('harta-modal'));
document.getElementById('harta-modal')[0].innerHTML = `${longitude} ${latitude}`;
}
</script>
</body>
</html>
當使用
getElementById取得元素時，您不必使用[0]存取第一個元素，因為它只能傳回一個元素。來自 mozilla 文件：
所以只要使用：
function makeMap(longitude, latitude){ console.log(document.getElementById('harta-modal')); document.getElementById('harta-modal').innerHTML = `${longitude} ${latitude}`; }