Uncaught TypeError: Cannot set properties of undefined (setting 'innerHTML')-CodePudding

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  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  id="modal-container">
        <div >
            <!--<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:0x72ef99e6b3fcf079!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>

CodePudding user response：

When getting an element with getElementById you do not have to acces the first element with [0] since it can only return one element.

From mozilla doc:

The Document method getElementById() returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.

So just use:

function makeMap(longitude, latitude){
                console.log(document.getElementById('harta-modal'));
                document.getElementById('harta-modal').innerHTML = `${longitude} ${latitude}`;
            }