-3
Я пытался создать выпадающее меню (хотя, по общему признанию, они не совсем так, как планировалось.)Почему getElementByID null?
Моя основная проблема заключается в том, что, несмотря на то, что вы не обнаруживаете никаких синтаксических ошибок, я, кажется, что-то получаю в getElementByID как null, поэтому ничего действительно не появляется, кроме содержимого тела.
Это потому, что я был ленив и использовал одно и то же имя класса для обоих выпадающих списков (идентификатор отличается, и я проверил, чтобы написание было одинаковым как для ID, так и для getElementByID), поэтому я не должен возиться с тем же выпадающим списком.
Правда, в CSS у меня не совсем есть элементы для eAndADropdown еще в стиле, но это не должно вызывать эту ошибку, не так ли?
Прямо сейчас, все исчезает. Обычно я думаю, что это была синтаксическая ошибка, но если она одна, она полностью ускользает от меня, поскольку я проверил и проверил.
Я даже проверил & в событиях и деятельности, имеющие как ; после того, как & код и также не ; после & кода, просто чтобы убедиться, что это было. Кажется, не имеет значения:
<?php
echo "<div id='content'>";
echo "<div id='logo'>";
echo "<img src='./logo.png'></img>";
echo "</div>";
echo "<div id='container'>";
echo "<nav id='hor'>";
echo "<ul>";
echo "<li><a href='./index.php'> Home </a> </li>";
echo "<li><a href='./mountains.php'> The Mountains </a></li>";
echo "<li><a href='./resorts.php'> The Resorts </a></li>";
echo "<li><a href='./snowreports.php'> Snow Reports </a></li>";
echo "<li class='dropdown'><a href='javascript:void(0)' class='dropbtn' onclick='showEAndADropdownHor()'> Events & Activities ↓</a>";
echo "<div class='dropdown-content' id='eAndADropdown'>";
echo "<ul>";
echo "<li><a href='./eventsandactivities.php'> Main </a></li>";
echo "<br/>";
echo "<li> <a href='./foggyGoggle.php'> Foggy Goggle </a></li>";
echo "<br/>";
echo "<li><a href='./lessons.php'> Ski Lessons </a></li>";
echo "<br/>";
echo "</ul>";
echo "</div>";
?>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function showEAndADropdownHor() {
document.getElementById("eAndADropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<?php
</li>";
echo "<li><a href='./plantrip.php'> Plan A Trip </a></li>";
echo "<li><a href='./contactus.php'> Contact Us </a></li>";
echo "<li><a href='./findus.php'> Find Us </a></li>";
echo "<li class='dropdown'> <a href='javascript:void(0)' class='dropbtn' onclick='showRestaurantDropdownHor()'> Restaurants ↓</a>";
echo "<div class='dropdown-content' id='restaurantDropdown'>";
echo "<ul>";
echo "<li><a href='./grandviewbistro.php'>Grand View Bistro</a></li>";
echo "<br/>";
echo "<li><a href='./angelescrestcafe.php'>Angeles Crest Café</a></li>";
echo "<br/>";
echo " <li><a href='./goldrushgrill.php'>Goldrush Grill</a></li>";
echo "<br/>";
echo "<li><a href='./bullwheelbarandgrill.php'> Bullwheel Bar & Grill </a></li>";
echo "<br/>";
echo "<li><a href='./bigpinesbarbecue.php'> Big Pines Barbecue </a></li>";
echo "<br/>";
echo "<li><a href='./northpolegrill.php'> North Pole Grill </a></li>";
echo "</ul>";
echo "</div>";
?>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function showRestaurantDropdownHor() {
document.getElementById("restaurantDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<?php
echo"</li>";
echo "<li><a href='./about.php'> About </a> </li>";
echo "</ul>";
echo "</nav>";
echo "<div id='middle'>";
echo "<nav id='vert'>";
echo "<ul>";
echo "<li><a href='./index.php'> Home </a></li> <br/>";
echo "<li><a href='./mountains.php'> The Mountains </a></li><br/>";
echo "<li><a href='./resorts.php'> The Resorts </a></li><br/>";
echo"<li><a href='./snowreports.php'> Snow Reports </a></li><br/>";
echo "<li><a href='./eventsandactivities.php'> Events & Activities </a></li><br/>";
echo "<li><a href='./plantrip.php'> Plan A Trip </a></li><br/>";
echo "<li><a href='./contactus.php'> Contact Us </a></li><br/>";
echo "<li><a href='./findus.php'> Find Us</a></li><br/>";
echo "<li><a href='./restaurants.php'> Restaurants → </a></li><br/>";
echo "<li><a href='./about.php'> About </a> </li><br/>";
echo "</ul>";
echo "</nav>";
?>
В чем может быть проблема?
Я также обнаружил, что делает следующий код работы:
<?php
echo "<div id='content'>";
echo "<div id='logo'>";
echo "<img src='./logo.png'></img>";
echo "</div>";
echo "<div id='container'>";
echo "<nav id='hor'>";
echo "<ul>";
echo "<li><a href='./index.php'> Home </a> </li>";
echo "<li><a href='./mountains.php'> The Mountains </a></li>";
echo "<li><a href='./resorts.php'> The Resorts </a></li>";
echo "<li><a href='./snowreports.php'> Snow Reports </a></li>";
echo "<li><a href='./eventsandactivities.php'> Events & Activities
</a></li>";
echo "<li><a href='./plantrip.php'> Plan A Trip </a></li>";
echo "<li><a href='./contactus.php'> Contact Us </a></li>";
echo "<li><a href='./findus.php'> Find Us </a></li>";
echo "<li class='dropdown'> <a href='javascript:void(0)'
class='dropbtn' onclick='showRestaurantDropdownHor()'>
Restaurants ↓</a>";
echo "<div class='dropdown-content' id='restaurantDropdown'>";
echo "<ul>";
echo "<li><a href='./grandviewbistro.php'>Grand View
Bistro</a></li>";
echo "<br/>";
echo "<li><a href='./angelescrestcafe.php'>Angeles Crest
Café</a></li>";
echo "<br/>";
echo " <li><a href='./goldrushgrill.php'>Goldrush Grill</a></li>";
echo "<br/>";
echo "<li><a href='./bullwheelbarandgrill.php'> Bullwheel Bar
& Grill </a></li>";
echo "<br/>";
echo "<li><a href='./bigpinesbarbecue.php'> Big Pines Barbecue
</a></li>";
echo "<br/>";
echo "<li><a href='./northpolegrill.php'> North Pole Grill
</a></li>";
echo "</ul>";
echo "</div>";
?>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function showRestaurantDropdownHor() {
document.getElementById("restaurantDropdown").classList.toggle
("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName
("dropdown-content");
for (var d = 0; d < dropdowns.length; d++) {
var openDropdown = dropdowns[d];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<?php
echo"</li>";
echo "<li><a href='./about.php'> About </a> </li>";
echo "</ul>";
echo "</nav>";
echo "<div id='middle'>";
echo "<nav id='vert'>";
echo "<ul>";
echo "<li><a href='./index.php'> Home </a></li> <br/>";
echo "<li><a href='./mountains.php'> The Mountains </a></li><br/>";
echo "<li><a href='./resorts.php'> The Resorts </a></li><br/>";
echo"<li><a href='./snowreports.php'> Snow Reports
</a></li><br/>";
echo "<li><a href='./eventsandactivities.php'> Events & Activities
</a></li><br/>";
echo "<li><a href='./plantrip.php'> Plan A Trip </a></li><br/>";
echo "<li><a href='./contactus.php'> Contact Us </a></li><br/>";
echo "<li><a href='./findus.php'> Find Us</a></li><br/>";
echo "<li><a href='./restaurants.php'> Restaurants →
</a></li><br/>";
echo "<li><a href='./about.php'> About </a> </li><br/>";
echo "</ul>";
echo "</nav>";
?>
Кроме того, на offchance, что это что-то в моем CSS, я выложу, что тоже:
#logo
{
border: 1px dashed purple;
width: 1050;
height: 75;
}
#logo > img
{
width: 1050;
height: 75;
}
.floatleft
{
float: left;
}
.floatright
{
float: right;
}
#content
{
border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 960px;
background-color: #ffffff;
background-repeat: repeat-y;
height: 800;
}
nav
{
border: 10px solid transparent;
padding: 15px;
border-image-source: url(./blue-diamond.gif);
border-image-repeat:repeat;
border-image-slice: 30;
background-color: 2211ff;
font-family: "Impact", Times, serif;
font-size: 112%;
}
nav#vert
{
width: 220px;
height: 540px;
margin: 0px;
display:table-cell;
}
body {
color: #000000;
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
background-color: #422520;
background-image: url(./snow_mountain.jpg);
background-repeat:no-repeat;
background-size:cover;
text-align: center;
background-attachment: fixed;
background-position: center;
}
#footerContainer
{
border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 980px;
background-color: #ffffff;
background-repeat: repeat-y;
}
footer
{
border: 10px solid transparent;
padding: 15px;
text-align: left;
margin: 0 auto;
width: 1000px;
background-repeat: repeat-y;
border-image-source: url(./blue-diamond.gif);
border-image-repeat:repeat;
border-image-slice: 30;
background-color: 2211ff;
font-family: "Impact", Times, serif;
font-size: 14px;
color: white;
}
footer > a
{
color: white;
font-family: "Impact", Times, serif;
font-size: 14px;
}
#container
{
border-left: 3px solid #283379;
border-right: 3px solid #283379;
text-align: left;
margin: 0 auto;
width: 1050px;
background-color: #ffffff;
background-repeat: repeat-y;
height: 750px;
}
nav > a
{
color: #ccccff;
}
nav#hor > div
{
border: 1px solid white;
float: left;
padding: 10px;
background-color: #000044;
}
nav#hor
{
width: 1000px;
height: 50px;
margin: 0;
font-size: 112%;
}
nav#hor a
{
color: rgb(0 0,238);
}
nav#hor > div > a
{
color: #ccccff;
text-decoration: none;
font-size: 100%;
}
nav#hor>div:hover
{
background-color: #018802;
}
h1
{
font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 36px;
}
h2
{
font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 26px;
}
h3
{
font-family: "MV Boli", Times, Serif;
font-style: bold;
text-align: center;
font-size: 20px;
}
#text-container
{
border: 2px solid cyan;
width: 1005px;
height: 690px;
*/ zoom: 1;
*/ margin: 0;
display: table-cell;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#text-container:after
{
clear: both;
content: ".";
display: block;
height: 0;
visibility:hidden;
}
#text-container > p
{
font-family: "Myriad Web Pro", Times, Serif;
font-size: 18px;
}
.left img
{
float: left;
padding: 0 20px 20px 0;
}
.left > p
{
font-family: "Myriad Web Pro", Times, Serif;
font-size: 18px;
}
.right img
{
float: right;
margin: 0px 0px 15px 20px;
border: 1px solid transparent;
}
.right > p
{
font-family: "Myriad Web Pro", Times, Serif;
font-size: 18px;
}
nav#hor ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
background-color: #000044;
}
nav#hor ul li:hover
{
background-color: #018802;
}
nav#vert ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
background-color: #000044;
}
nav#hor li
{
float: left;
border: 1px solid white;.
}
nav#vert li
{
float: left;
border: 1px solid white;.
}
nav#vert li a, .dropbtn {
display: inline-block;
// color: white;
text-align: center;
padding: 8px 8px;
text-decoration: none;
}
nav#hor li a, .dropbtn {
display: inline-block;
// color: white;
text-align: center;
padding: 8px 8px;
text-decoration: none;
}
nav#hor li a:hover, .dropdown:hover .dropbtn {
background-color: #018802;
}
nav#vert li a:hover, .dropdown:hover .dropbtn {
background-color: #018802;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
color: rgb(0, 0, 238);
}
#eAndADropdown
{
}
#restaurantDropdown li
{
background-color: #000044;
border: 1px solid white;
}
#restaurantDropdown ul
{
border: 1px solid white;
}
#restaurantDropdown:hover
{
background-color: #018802;
}
#restaurantDropdown a
{
color: rgb(0, 0, 238);
}
.dropdown-content a {
color: rgb(0, 0, 238);
border: 1 px solid white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
li a
{
color: rgb(0, 0, 238);
}
Динамическая генерация с PHP, вероятно, преступник, 'getElementById()' не находит элементы с идентификаторами, указанными потому, что они не существуют при использовании функции – Li357
я не делаю получить его, это сработало, когда я сделал это только с одним рестораном. Что происходит не так, когда я пытался дублировать то, что я сделал с рестораном, чтобы создать раскрытие событий и мероприятий. – MongooseLover
Не парень PHP, извините – Li357