I continually run into the error message "Uncaught ReferenceError: dropMenu is not defined" and "Uncaught TypeError: Cannot read property 'style' of null."

Question

I continually run into the error message "Uncaught ReferenceError: dropMenu is not defined" and "Uncaught TypeError: Cannot read property 'style' of null."

I'm attempting to create a navigation bar with submenus, but I keep encountering errors such as "dropMenu is not defined" and "Uncaught TypeError: Cannot read property 'style' of null" when hovering over the Paris links. Any thoughts on what might be causing this issue? Here is my code:

<html>
<link type="text/css"  rel="stylesheet" href="vacation.css"/>
<head>
<title>Paris</title>
</head>
<body>
<div id="menus">
<div id ="parismenu">
<a href="#" onmouseover="dropMenu('dropmenu1')">Paris</a>
<div id="dropmenu1" class="dropmenus">
<a href="#">apple</a>
</div>
</div>
<div id ="disneymenu">
<a href="#" onmouseover="dropMenu('dropmenu2')">Paris</a>
<div id="dropmenu2" class="dropmenus">
<a href="#">apple</a>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
 <script type="text/javascript" src="vacation.js"></script>
  </html>

CSS

div#menus{
margin-left:16px;
 }
 div#menus> div{
 float:left;
 margin:0px 20px;
 }
 div.dropmenus{
 display:none;
 position:absolute;
 top:100px;
 width:120px;
 background:teal;
 z-index:2;
 padding:4px;
 border: blue 3px solid;
 border-top:none;
 border-radius:5px 5px 5px 5px;
 }
 div.dropmenus>a{
 display:block;
 margin:4px;
 padding:7px;
 font-size:14px;
 text-decoration:none;
 background:blue;
 border-radius:3px;
 color:red;
 }
 div#dropmenu1{
 left:24px;
 }
 div#dropmenu2{
 left:116px;
 }

Javascript

 var fade=function(){
 return{
 init:function(id,flag,target){
 this.elem=document.ElementById(id);
 clearInterval(this.elem.si);
 this.target=target ? target : flag ? 100 : 0;
 this.flag = flag||1;
 this.alpha = this.elem.stle.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
 this.elem.si=setIntterval(function(){fade.fadep()},20);
 },
 fadep:function(){
 if(this.alpha==this.target){
 clearInterval(this.elem.si);
 }
 else{
 var value=Math.round(this.alpha + ((this.target - this.alpha) * .05)) +(-1 * this.flag);
 this.elem.style.opacity=value/100;
 this.elem.style.filter='alpha(opacity=' + value + ')';
 this.alpha=value
 }}}}();

 var menu= ["dropmenu1","dropmenu2","dropmenu3"];
 function dropMenu(x){
 for(var m in menu){
 if(menu[m] != x){
 document.getElementById(menu[m]).style.display="none";
 }}
 if(document.getElementById(x).style.diplay=="block"){
 fade.init(x,1);
  }
 else{
 fade.init(x,0)}}

javascript html css

Answer 1

Answer №1

The array consists of three unique identifiers, yet your html script displays only the first two.

document.getElementById(menu[m])

If m equals 2, this line will return as undefined.

To fix this issue, simply remove "dropmenu3" from the menu array.

Furthermore, ensure that the following line is corrected:

this.elem=document.ElementById(id);

A more accurate representation would be:

this.elem=document.getElementById(id);

Answer 2

The array consists of three unique identifiers, yet your html script displays only the first two.

document.getElementById(menu[m])

If m equals 2, this line will return as undefined.

To fix this issue, simply remove "dropmenu3" from the menu array.

Furthermore, ensure that the following line is corrected:

this.elem=document.ElementById(id);

A more accurate representation would be:

this.elem=document.getElementById(id);

Answer 3

Answer №2

If you prefer to accomplish this task without using jQuery, here is the code required. The original JavaScript had a few typos which I have corrected. Additionally, I modified it so that all elements not being hovered over are instantly hidden.

HTML

<div id="menus">
    <div id="parismenu">
        <a href="#" onmouseover="dropMenu('dropmenu1');">Paris</a>
        <div id="dropmenu1" class="dropmenus">
            <a href="#">apple</a>
        </div>
    </div>
    <div id="disneymenu">
        <a href="#" onmouseover="dropMenu('dropmenu2');">Paris</a>
        <div id="dropmenu2" class="dropmenus">
            <a href="#">apple</a>
        </div>
    </div>
</div>

JAVASCRIPT

var menu = ["dropmenu1", "dropmenu2"];

function dropMenu(x) {
    for (var m in menu) {
        if(menu[m] != x){
            document.getElementById(menu[m]).style.opacity = 0;
            document.getElementById(menu[m]).style.filter = 'alpha(opacity=0)';
        }
    }
    fade.init(x, 1);
}
var fade=function(){
    return{
        init:function(id, flag, target){
            this.elem = document.getElementById(id);
            clearInterval(this.elem.si);
            this.target = target ? target : flag ? 100 : 0;
            this.flag = flag || -1;
            this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
            this.elem.si = setInterval(function(){fade.tween()}, 20);
        },
        tween:function(){
            if(this.alpha == this.target){
                clearInterval(this.elem.si);
            }else{
                var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
                this.elem.style.opacity = value / 100;
                this.elem.style.filter = 'alpha(opacity=' + value + ')';
                this.alpha = value
            }
        }
    }
}();

I did not modify your CSS. You can test the code with a working jsfiddle here.

Answer 4

If you prefer to accomplish this task without using jQuery, here is the code required. The original JavaScript had a few typos which I have corrected. Additionally, I modified it so that all elements not being hovered over are instantly hidden.

HTML

<div id="menus">
    <div id="parismenu">
        <a href="#" onmouseover="dropMenu('dropmenu1');">Paris</a>
        <div id="dropmenu1" class="dropmenus">
            <a href="#">apple</a>
        </div>
    </div>
    <div id="disneymenu">
        <a href="#" onmouseover="dropMenu('dropmenu2');">Paris</a>
        <div id="dropmenu2" class="dropmenus">
            <a href="#">apple</a>
        </div>
    </div>
</div>

JAVASCRIPT

var menu = ["dropmenu1", "dropmenu2"];

function dropMenu(x) {
    for (var m in menu) {
        if(menu[m] != x){
            document.getElementById(menu[m]).style.opacity = 0;
            document.getElementById(menu[m]).style.filter = 'alpha(opacity=0)';
        }
    }
    fade.init(x, 1);
}
var fade=function(){
    return{
        init:function(id, flag, target){
            this.elem = document.getElementById(id);
            clearInterval(this.elem.si);
            this.target = target ? target : flag ? 100 : 0;
            this.flag = flag || -1;
            this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
            this.elem.si = setInterval(function(){fade.tween()}, 20);
        },
        tween:function(){
            if(this.alpha == this.target){
                clearInterval(this.elem.si);
            }else{
                var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
                this.elem.style.opacity = value / 100;
                this.elem.style.filter = 'alpha(opacity=' + value + ')';
                this.alpha = value
            }
        }
    }
}();

I did not modify your CSS. You can test the code with a working jsfiddle here.

Answer 5

Answer №3

Have you considered utilizing the jQuery fader for this task? I've made some improvements to your JavaScript and HTML. Instead of relying on the element onMouseover event, I've added a listener to that element for the event after the document has loaded.

<!-- HTML -->
<div id="menus">
    <div id="parismenu">
        <a href="#" class="dropmenu" data-menu-id="#dropmenu1">Paris</a>
        <div id="dropmenu1" class="dropmenus">
            <a href="#">apple</a>
        </div>
    </div>
    <div id="disneymenu">
        <a href="#" class="dropmenu" data-menu-id="#dropmenu2">Disney</a>
        <div id="dropmenu2" class="dropmenus">
            <a href="#">apple</a>
        </div>
    </div>
</div>

Next, in the JavaScript:

$(function () {
    $('.dropmenu').on('mouseover', function (event) {
        $($(this).attr('data-menu-id')).fadeIn();
    });
    $('.dropmenu').on('mouseout', function (event) {
        $($(this).attr('data-menu-id')).fadeOut();
    });
});

Your CSS remains unchanged.

Check out this JSFIDDLE link for a demonstration of the working example.

Answer 6

Have you considered utilizing the jQuery fader for this task? I've made some improvements to your JavaScript and HTML. Instead of relying on the element onMouseover event, I've added a listener to that element for the event after the document has loaded.

<!-- HTML -->
<div id="menus">
    <div id="parismenu">
        <a href="#" class="dropmenu" data-menu-id="#dropmenu1">Paris</a>
        <div id="dropmenu1" class="dropmenus">
            <a href="#">apple</a>
        </div>
    </div>
    <div id="disneymenu">
        <a href="#" class="dropmenu" data-menu-id="#dropmenu2">Disney</a>
        <div id="dropmenu2" class="dropmenus">
            <a href="#">apple</a>
        </div>
    </div>
</div>

Next, in the JavaScript:

$(function () {
    $('.dropmenu').on('mouseover', function (event) {
        $($(this).attr('data-menu-id')).fadeIn();
    });
    $('.dropmenu').on('mouseout', function (event) {
        $($(this).attr('data-menu-id')).fadeOut();
    });
});

Your CSS remains unchanged.

Check out this JSFIDDLE link for a demonstration of the working example.

I continually run into the error message "Uncaught ReferenceError: dropMenu is not defined" and "Uncaught TypeError: Cannot read property 'style' of null."

Answer №1

Answer №2

Answer №3

Similar questions

Implementing a file download feature in Python when clicking on a hyperlink

What is the best way to designate external dependencies in WebPack that are not imported using '*'?

Obtain user input and extract the name using jQuery's serialization function

"The combination of Node.js, Express, and Angular is causing a continuous loop in the controller when a route is

The problem lies in the incorrect rewriting of static resources leading them to be redirected to the

Storing Unique Characters in the Database

Iterating through an array and displaying information according to the quantity in node.js

Is there a way to dynamically modify a website's default viewport settings in a mobile browser?

Exploring the methods for monitoring multiple UDP ports on a single address in Node.js within a single process

The implementation of CSS in one React component has an impact on the functionality of the Ant Design Select component in

Developing a collection of reusable components in a Javascript bundle for enhanced efficiency

Steps for setting the value of a textbox within a bootstrap popover

Having trouble with .animate() function?

Is the textarea's shape out of the ordinary?

Creating a countdown clock with JavaScript

ng-change not firing when selecting from ng-options list

The Node.contains() function in JavaScript does not verify the presence of inner child elements

The button is disabled once inline CSS is applied to it

Modify the CSS of one div when hovering over a separate div

Challenges with Div Height and Border