未捕获的类型错误：无法设置未定义的属性（设置“innerHTML”）

我正在尝试使用 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>

P粉022140576401 天前822

未捕获的类型错误：无法设置未定义的属性（设置“innerHTML”）

全部回复(1)我来回复