Uncaught TypeError : impossible de définir la propriété non définie (définir 'innerHTML')
J'essaie de créer une page web en utilisant php, sur un élément de la classe "Continuous TextBox" (défini par ma classe), lorsque je clique dessus je dois démarrer une fonction Javascript qui doit changer le contenu d'une autre fonction id "harta- modal", mais cela ne se produit pas. Je reçois toujours la même erreur, "Uncaught TypeError: Cannot set property of undefined (set 'innerHTML')" même si la fonction est déclarée après l'élément qu'elle est censée changer et le contrôle que j'y ai écrit. Taiwan Log Cette fonction fait ne renvoie pas null. Qu'ai-je fait de mal?
<?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>
