未捕獲的類型錯誤：無法設定未定義的屬性（設定'innerHTML”）-PHP中文網路問答

我正在嘗試使用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>

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