Ich versuche, eine Webseite mit PHP für ein Element der Klasse „Continuous TextBox“ (von meiner Klasse definiert) zu erstellen. Wenn ich darauf klicke, muss ich eine Javascript-Funktion starten, die den Inhalt einer anderen Funktions-ID „harta-“ ändern soll. modales" Element, aber das passiert nicht. Ich erhalte immer wieder die gleiche Fehlermeldung „Uncaught TypeError: Eigenschaft von undefiniert kann nicht festgelegt werden (set ‚innerHTML‘)“, obwohl die Funktion nach dem Element deklariert ist, das sie ändern soll, und das Steuerelement, das ich darin geschrieben habe. Taiwan Log Diese Funktion tut dies nicht null zurückgeben. Was habe ich falsch gemacht?
<?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>
当使用
getElementById获取元素时，您不必使用[0]访问第一个元素，因为它只能返回一个元素。来自 mozilla 文档：
所以只需使用：
function makeMap(longitude, latitude){ console.log(document.getElementById('harta-modal')); document.getElementById('harta-modal').innerHTML = `${longitude} ${latitude}`; }