I am trying to create a web page using php that, on the elements of class “continut-text-box” (a defined by my class), on click has to launch a Javascript function that should change the contents of another element of id “harta-modal”, but this does not happen. I keep getting the same error and that is “Uncaught TypeError: Cannot set properties of undefined (setting ‘innerHTML’)”, even though the function is declared after the element that it is supposed to change, and the console log that I wrote in the function does not return null.
What did I do wrong?
<?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>