简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Uncaught TypeError : impossible de définir la propriété non définie (définir 'innerHTML')
P粉022140576
P粉022140576 2023-11-08 21:06:09
0
1
786

J'essaie de créer une page web en utilisant php, sur un élément de la classe "Continuous TextBox" (défini par ma classe), lorsque je clique dessus je dois démarrer une fonction Javascript qui doit changer le contenu d'une autre fonction id "harta- modal", mais cela ne se produit pas. Je reçois toujours la même erreur, "Uncaught TypeError: Cannot set property of undefined (set 'innerHTML')" même si la fonction est déclarée après l'élément qu'elle est censée changer et le contrôle que j'y ai écrit. Taiwan Log Cette fonction fait ne renvoie pas null. Qu'ai-je fait de mal? 

<?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粉022140576
P粉022140576

répondre à tous(1)
P粉221046425
P粉2210464252023-11-09 16:12:10 1 plancher

Lorsque vous utilisez getElementById 获取元素时，您不必使用 [0], accédez au premier élément car il ne peut renvoyer qu'un seul élément.

De la documentation Mozilla :

Alors utilisez simplement : 

function makeMap(longitude, latitude){
                console.log(document.getElementById('harta-modal'));
                document.getElementById('harta-modal').innerHTML = `${longitude} ${latitude}`;
            }
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！