Error Message: The function "menu" is not a valid function

I've encountered an issue with a function not being called properly. The error message states "TypeError: menu is not a function." I attempted to troubleshoot by moving the function before the HTML that calls it, but unfortunately, this did not resolve the problem.

<script>
    var dropdown = document.querySelector("nav .dropdown");
    var menu = document.querySelector("nav div .menu");

    function menu()
    {
        if(dropdown.style.display === "none")
        {
            dropdown.style.display = "grid";
        }
        else
        {
            dropdown.style.display = "none";
        }
    } </script>

<input class="button" type="button" onclick="location.href='Controller/logout.php';" value="logout" /> <nav>
    <div class="content">
        <div class="links">
            <a href="Home">Home</a>
            <a href="Portfolio">Portfolio</a>
            <a href="Reviews">Reviews</a>
        </div>
        <i class="material-icons menu" onclick="menu()">menu</i>
    </div>
    <div class="dropdown">
        <a href="Home">Home</a>
        <a href="Portfolio">Portfolio</a>
        <a href="Reviews">Reviews</a>
    </div> </nav>
javascripthtmlcssdropdown

Answer №1

You may encounter an error due to naming conflicts. The message "Menu is not a function" is likely appearing because you initially declare it with var and later redefine it using function. Consider adjusting the names of your variables, or consider removing the initial declaration if it is unnecessary.

Answer №2

The reason it's not functioning is because you have named both the HTML class and JS function as "menu". Simply rename your function in both places.

<i class="material-icons menu" onclick="menu()">menu</i>

to 

<i class="material-icons menu" onclick="menuFunc()">menu</i>

also 

function menu()

to 

function menuFunc()

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What CSS selector should I apply to create a circular profile image for Buddypress users?

In my current WordPress project, I am utilizing the BuddyPress, WooCommerce, and WC Vendors plugins for enhanced functionality. To personalize each vendor's product listings, I decided to display their BuddyPress profile picture alongside their produ ...

csswordpresswordpress-themingbuddypress

Steps to eliminate a specific value from an array

I need to remove values with the .html extension from an array in JavaScript, leaving only those items that do not have the .html extension. Here's my current code: main.js: var arr=["test1.html","power.html","main.html","save.md","kart.html","taste ...

javascriptjquery

Design a recurring report using an endless JavaScript cycle

I am in the process of creating a brand new scheduled report and have encountered an issue. How can I incorporate a script that includes a loop to run a specific function every 10 seconds? Here's what I have so far: var count = 1; while(count > 0 ...

javascriptreportcognos

JSONP request resulted in a syntax error

I'm having trouble retrieving data from a JSONP source, as it keeps throwing a Syntax error when the function is called. I am quite new to this subject and find it hard to understand why this error occurs. It seems like my understanding of JSONP reque ...

javascriptjqueryjsonajaxjsonp

Methods for hiding and showing elements within an ngFor iteration?

I am working on an ngFor loop to display content in a single line, with the option to expand the card when clicked. The goal is to only show the first three items initially and hide the rest until the "show more" button is clicked. let fruits = [apple, o ...

javascriptangular

"Deactivate the escaping feature in PHP when using heredoc syntax

My PHP code generates minified JS output using the heredoc. Take a look at this snippet: function prerefresh(){$("#len").empty();predata.forEach(item)} I've highlighted that the {$ is causing issues with variable escaping in my heredoc. Is there a ...

phpjavascriptescapingheredoc

Learn the step-by-step process of clicking on a button to modify its properties and deactivate it

I could really use some assistance. I'm trying to make a button: <v-btn dark color="primary" class="square">Tile 1</v-btn> Is there a way I can modify it so that when clicked, it changes to flat, becomes disabled, and switches its color ...

javascriptvue.jsvuejs2vue-componentvuetify.js

Guide to modifying the behavior of a dynamic dropdown menu

Jquery: $('body').on('change', '.combo', function() { var selectedValue = $(this).val(); if ($(this).find('option').size() > 2) { var newComboBox = $(this).clone(); var thisComboBoxIndex ...

jqueryhtmlcombobox

I'm curious as to why my form fields disappear even when they have not been selected

Illustration of Form Fields Disappearing When Unselected Greetings, I'm encountering an issue where my form fields disappear when not selected. I'm utilizing Crispy Forms to render the form, following a tutorial on YouTube. This functionality w ...

pythonhtmldjangobootstrap-4django-crispy-forms

Is there a way to make a picture fill the entire background?

Is there a way to make pictures expand across an entire page with different resolutions? I'm trying to achieve this effect but unsure how. Take a look at my current example: . ...

javascripthtmlcssimage

Does the unique identifier of the element remain constant in jQuery?

For example: $("#savenew").live('click', function(e) { var user=<?php echo $user?>; $.ajax({ type: "POST", url: "actions/sub.php", data:{user: user} , ...

javascriptjqueryajaxrequest

The functionality of ng-table appears to be compromised when working with JSON data

Currently, I am facing an issue while using a JSON file to populate data in my Angular ng-table. Even though the JSON data is being displayed in a regular table format, certain functionalities of ng-table like pagination and view limit are not functioning ...

javascriptangularjsngtable

The function this.listCatModel.push is not a valid operation

I have a dropdown that I want to populate using the following code: this.categoryService.GetListItem(this.GetAllcatListUrl).subscribe(data=>{ this.listCatModel=data, this.listCatModel.push({ id:0, name:'Main Category', parent ...

javascriptangulartypescript

The perfect approach for loading Cordova and Angularjs hybrid app flawlessly using external scripts

We have developed a single page hybrid app using cordova 3.4.0 and angularJS with the help of Hybrid app plugin(CPT2.0) in visual studio 2013. This app contains embedded resources such as jquery, angularjs, bootstrap, and some proprietary code. Additiona ...

javascriptangularjscordovavisual-studio-cordova

Modifying dat.gui to reflect changes made to the selected object

check out this working code I am currently exploring ways to update or refresh dat.gui in order to reflect the changes I make to my selection. My main objective is to generate random cubes and then manipulate a single cube by rotating, scaling, changing p ...

javascriptthree.jsdat.gui

Why isn't the button border displaying the color I assigned to it?

After setting a border color to my button, it's not displaying the color when I click on it. Instead, it's showing a different color. How can I resolve this issue? I need some assistance with setting the background of my button to match the imag ...

htmlcssfont-awesome

Running system commands using javascript/jquery

I have been running NodeJS files in the terminal using node filename.js, but now I am wondering if it is possible to execute this command directly from a JavaScript/jQuery script within an HTML page. If so, how can I achieve this? ...

javascriptjqueryhtml

Error Encountered in jQuery UI SelectMenu

Struggling to integrate the jQuery UI SelectMenu, I keep encountering the same error in the browser console. Below is the HTML Code: <select name="files" id="files"> <optgroup label="Scripts"> <option value="jquery">jQuery.js</ ...

javascriptjqueryhtmljquery-ui

A guide on displaying parent and child items from an array using PHP

I am a beginner in php and I have a simple question. I want to create a parent-child view using an array with key id and key parent. How can I properly structure this in a cycle? Do I need to start by creating a function for building the tree? -Apple ...

phphtmlparent-child

Listening for events on a canvas positioned beneath another element

I am currently dealing with an issue where I have a mouse move event listener set up on my canvas element. However, there is a div placed on top of the canvas with a higher z-index, which contains some menu buttons. The problem arises when I want the mous ...

javascripthtmlcanvas