Question

我有一个菜单下拉列表和一系列过滤器下拉列表，到目前为止，这两个列表都可以正常工作。

将带有CSS的徽标添加到菜单下拉菜单中后，当我选择过滤器时，它会破坏菜单的JavaScript，并且菜单根本无法使用。我收到未捕获的Typeerror。

过滤器使用表单和“ get”对onChange设置进行排序，以使用适当的“ get”参数重新提交页面。

这是菜单html

<button id="burg" onclick="menuChange();" class="hamburger">&#9776;</button>
<button id="xCross" onclick="menuChange();" class="cross">&#735; </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>

未捕获的Typeerror指向

mainArea.style.position = 'relative';

并

navList.style.display = 'block';

它表示无法读取null的属性“样式”。

我相当确定问题出在过滤器/获取中。

Answer 1

哇，我感觉像个磨砂膏。

无论出于何种原因，我的navList和dropDownFreeze的ID均已从我的页面之一删除。重置它们后，它运行完美。

代码：1我：0

未被捕获的Typeerror，已损坏的JS

1 个答案: