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

Question

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.我正在尝试使用 php 创建一个网页，在类“continut-text-box”（由我的类定义）的元素上，单击时必须启动一个 Javascript 函数，该函数应该更改另一个 id 元素的内容“harta-modal”，但这不会发生。 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.我不断收到相同的错误，即“未捕获的类型错误：无法设置未定义的属性（设置'innerHTML'）”，即使该函数是在它应该更改的元素和我写的控制台日志之后声明的该函数不返回空值。 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>

Answer 1

When getting an element with getElementById you do not have to acces the first element with [0] since it can only return one element.使用getElementById获取元素时，您不必使用[0]访问第一个元素，因为它只能返回一个元素。

From mozilla doc :从Mozilla 文档：

The Document method getElementById() returns an Element object representing the element whose id property matches the specified string. Document 方法 getElementById() 返回一个 Element 对象，该对象表示其 id 属性与指定字符串匹配的元素。 Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.由于元素 ID 在指定时必须是唯一的，因此它们是快速访问特定元素的有用方法。

So just use:所以只需使用：

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

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-06-20 10:01:20

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-06-20 10:01:20

解决方案1
1 已采纳 2022-06-20 10:01:20