javascript - 未捕获的类型错误,损坏的 JS
问题描述
我有一个菜单下拉菜单和一系列过滤器下拉菜单,直到今天它们都运行良好。
将带有 css 的徽标添加到菜单下拉菜单后,当我选择过滤器时,它会破坏菜单的 javascript 并且菜单根本不起作用。我得到一个未捕获的类型错误。
过滤器使用表单和“get”来排序,设置 onChange 以重新提交带有适当“get”参数的页面。
这是菜单html
<button id="burg" onclick="menuChange();" class="hamburger">☰</button>
<button id="xCross" onclick="menuChange();" class="cross">˟ </button>
<ul id="navList">
<div class="nav-item">
<a href="inventory.php">
<li>Inventory</li>
</a>
</div>
<div class="nav-item">
<a href="#">
<li>Finance</li>
</a>
</div>
<div class="nav-item">
<a href="contact.php">
<li>Contact Us</li>
</a>
</div>
<div class="nav-item">
<a href="about.html">
<li>About Us</li>
</a>
</div>
<div id="lastNav" class="nav-item">
<a href="reviews.html">
<li>Reviews</li>
</a>
</div>
<div class="" id="navImage">
<a href="index.html">
<li><img src="images/asmOriginalLogo_V4.png" alt="Arizona Specialty Motors"/>
<div id="dropDownSocial"> <a href="#"><img class="socialMediaLinks" src="images/fbLogo.png" alt="Facebook"/></a> <a href="#"><img class="socialMediaLinks" src="images/In-Black-128px-TM.png" alt="LinkedIn"/></a> <a href="#"><img class="socialMediaLinks" src="images/instaGlyph.png" alt="Instagram"/></a> <a href="#"><img class="socialMediaLinks" src="images/twitterLogo.png" alt="Twitter" /></a> </div>
</li>
</a>
</div>
</ul>
<div id="dropdownFreeze">
这是我打开/关闭菜单的javascript函数。
function menuChange() {
"use strict";
/****** Variables *****/
// Burger link & image
var burger = document.getElementById("burg");
// Individual drop down elements; home, inventory, etc.
var lines = document.getElementsByClassName("nav-item");
// Overall container; to make dropdown 'un-scrollable'
var mainArea = document.getElementById("dropdownFreeze");
// Cross link & image
var cross = document.getElementById("xCross");
// Background for dropdown & navigation
var navList = document.getElementById("navList");
// Social Media images & buttons
var social = document.getElementById("navImage");
// If menu is open, close it. If closed, open it
if (burger.style.display === 'none') {
burger.style.display = 'block';
cross.style.display = 'none';
navList.style.display = 'none';
social.style.display = 'none';
for (var i = 0; i < lines.length; i++) {
lines[i].style.display = 'none';
}
mainArea.style.position = 'relative';
} else {
burger.style.display = 'none';
cross.style.display = 'block';
navList.style.display = 'block';
social.style.display = 'block';
for (var j = 0; j < lines.length; j++) {
lines[j].style.display = 'block';
}
mainArea.style.position = 'fixed';
}
}
这是我的一个过滤器(现在所有这些都会导致问题,但在添加 'navImage' div 之前没有)
<form name="sortMake" action="inventorySort.php?limit=10&page=1" method="get">
<select name="makeOrder" class="dropButton" onchange=this.form.submit();>
<option value="choose">Make</option>
<?php
$makeQuery = "select distinct make from vehicle order by make asc";
$makeResult = mysqli_query( $con, $makeQuery );
$selectMakeCount = 0;
if ( $makeResult ) {
while ( $makeRow = mysqli_fetch_array( $makeResult ) ) {
if ( isset( $_GET[ 'makeOrder' ] ) && $_GET[ 'makeOrder' ] == $makeRow[ 'make' ] ) {
echo '<option value="' . $makeRow[ 'make' ] . '"selected>' . $makeRow[ 'make' ] . '</option>';
} else {
echo '<option value="' . $makeRow[ 'make' ] . '">' . $makeRow[ 'make' ] . '</option>';
}
}
}
?>
</select>
未捕获的类型错误指向
mainArea.style.position = 'relative';
并
navList.style.display = 'block';
它说它无法读取 null 的属性“样式”。
我相当确定问题发生在过滤器/获取中。
解决方案
哇,我感觉像磨砂膏。
无论出于何种原因,我的 navList 和 dropDownFreeze 的 ID 已从我的一个页面中删除。重置它们后,它工作得很好。
代码:1 我:0
推荐阅读
- angular - Angular Service does not Retrieve Array Objects through RxJS of
- java - is there a reason why my merge sort does not work for array length 10
- java - CriteriaBuilder - Join table to itself with complex ON
- arrays - Convert Json array into csv using Nifi
- python-3.x - How do I prevent line.replace from removing extra lines?
- testng - Is there any TestNG Listener method to execute after each Classes in Package
- symfony - 如何在 symfony 中添加外键(一对多)
- php - How could I change the port of target host?
- matlab - Failing to keep only red channel of RGB image in MATLAB
- javascript - Is there a way to close a vue component by clicking outside of it?