Clicking the responsive menu does not reveal the hidden overlay div as expected

Struggling with finding the correct function to open the hidden div of my responsive menu on my new website.

Check out my code: https://codepen.io/anon/pen/XRJRGE

  <a class="page-head__menu"  id="js-menu" href="#"         onClick="open()">Menu</a> 

    <script> U = function(t) {
    M.setAttribute("data-state", "visible" === M.getAttribute("data-state") ?     "hidden" : "visible"), this.setAttribute("data-state", "open" ===  this.getAttribute("data-state") ? "closed" : "open"), 
"open" === this.getAttribute("data-state") && O ? (A(k, "white"), A(C, "white")) : O && (E(k, "white"), E(C, "white")), 
  "open" === this.getAttribute("data-state") ? clearInterval($): "/" === e.location.pathname && s(), t.preventDefault()
} </script>

<div id="js-overlay" >
      <ul class="menu-nav">
  <li class="sel"> <a href="/portfolio">Portfolio</a>
  <script>var Z = function(e) {
  var t = this.getAttribute("href");
  N.innerHTML = "", M && (M.setAttribute("data-state", "hidden"), D.setAttribute("data-state", "open")), w(t), a(t), e.preventDefault()
} </script>

  </li>
  <li class="sel"> <a href="/about">About &amp; Contact</a>
  </li>
</ul>
<div class="content"> </div>      
<div class="menu-social">
  <a href="https://facebook.com/bojanaknezevicart" class="page-social__facebook js-social-icon">Facebook</a>
  <a href="http://instagram.com/" class="page-social__instagram js-social-icon">Instagram</a>
  <a href="https://www.behance.net/" class="page-social__behance js-social-icon">Behance</a>
  <a href="http://dribbble.com/" class="page-social__dribbble js-social-icon hide-header">Dribbble</a>
</div></div> </div>

The code is quite lengthy, hence the link provided at the start of the question. A more visual representation is needed, like this: enter image description here

Answer №1

Rename the open function to a different name and follow these steps:

document.getElementById("js-modal").style.display = "block"

Include the above code snippet within the newly named function.
This is necessary as the windows object already has a function named open.

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

Converting XML to HTML with the help of XSLT transformation customization

I need assistance in adjusting the XSLT 1.0 transform within the provided xsl file to create an HTML version of the table coded in the attached XML file. The generated HTML output file should display the table from the XML file with alternating row backgro ...

Running a PHP function embedded in a JavaScript script

I've gone through all the questions here but I'm still struggling to grasp this concept or make it work. My goal is to have a button that triggers a script to execute a php function. HTML: <button id="update_submit" type="button" onClick="m ...

Alter and send back an object from within an asynchronous function

I'm struggling to access the updated fields of an object (userTracker) within asynchronous JavaScript code. Even after modifying the object inside a function (fetchUsers), it still returns as undefined. How can I successfully achieve this? This is wh ...

Removing single quotes and replacing them with spaces when passing data from JavaScript to MySQL

I'm currently focused on JavaScript using Hapi.js in my role at the company. My main task involves retrieving data from MongoDB and transferring it to a MySQL database. The challenge arises when dealing with data that contains single quotes within th ...

The AJAX request cannot be sent until the previous request has completed

I've encountered an issue where my AJAX request gets stuck until the previous non-AJAX request is completed. On my webpage, I have a video playing using HTML5 and I'm trying to make an AJAX call to the server simultaneously. Here are the detail ...

What could be causing this image to disregard the designated width value?

https://i.stack.imgur.com/bPH4t.png While working on my project with Next.js, I encountered an issue with the IconText component provided by Next.js. Even though I specified a width value for the image, it seems to be ignoring it. Below is the structure o ...

A guide on implementing an asynchronous timeout error handler in feathers

Is there a way to implement an async-function timeout error handler as a hook in Feathers that is located in the service file to manage promises within hooks? This post was created at the suggestion of @Bergi on my previous question If you are interest ...

Activate the opening of a .docx file in a new tab by utilizing an anchor tag

I have attached a docx file containing the terms and conditions for our project. Now, I would like to open it in a new tab. By clicking this link, you can view the <a title="click to view terms and conditions" style="color:blue;" target="_blank" href ...

Utilizing jQuery to incorporate a radio input function in a POST request

When the Index.php page button is pressed, data is sent to the Resultx.php script page, which then responds with an asynchronous call back on the same Index.php page. index.php <script> $(document).ready(function() { $("#input_form").subm ...

Display all saved bookmarks by utilizing JavaScript

How can I utilize Javascript to display a complete list of my bookmarks? Any advice on achieving this would be greatly appreciated. Thank you in advance. ...

javascript ondrag while self-pressing

Within this div, I have a series of p elements. My goal is to drag the selected element into the input field. Here's an example: var input = document.getElementById("test"); input.addEventListener('drop', function (event) { event.pr ...

Collecting data from Jitsi

After setting up a Jitsi server using packages, I am now trying to log connection statistics to a database. Specifically, I want to store data about significant bitrate changes during video calls. Although I have some familiarity with JavaScript and WebRT ...

Exploring the world of jQuery waypoints and the art of modifying

This is only the second question I'm asking here, so please be gentle! I've been experimenting with jQuery waypoints to dynamically show and hide a border under my navigation menu based on scroll position. For instance, when the sticky nav is ov ...

Ensuring Filesize Verification Prior to Upload on Internet Explorer Using Javascript

Can JavaScript be used to verify a file's size before it is uploaded to the server at the client side? This application is developed using EXTJS and Java and is limited to Internet Explorer 7 on Windows XP machines. ActiveX cannot be used. The workf ...

Looking to implement a jQuery ajax request for footable v3 specifically for a webservice. How can I achieve this?

After reviewing the footable documentation, I noticed that they only provide a method for fetching data from a file, and not from a webservice. Despite trying various combinations to retrieve JSON-formatted data into the footable instance, I have had no su ...

Update a particular package using Node

Is there a way to update Browser-sync without updating all my node packages? I need the version with the Browser-sync GUI, but I don't want to update everything else. ├─┬ <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemai ...

Anticipating the execution of pool.query within a callback function in the Express framework

Within an Express post endpoint, I am utilizing crypto.generateKeyPair. After generating the key pair, I wish to store it in my database and then return the ID of the inserted row within the same endpoint. Here is the code snippet for the endpoint: app.p ...

Updating the contents of one specific div without affecting all other divs with the same class

Below is the HTML code snippet in question: <a class="btn test-btn test-btn-1"> <span>Content 1</span> </a> This particular code block appears multiple times on the page. The number at the end of test-btn- is dynamically generat ...

Organize JSON data in Angular 6 from an observable based on a specific key

Note: While I am familiar with sorting a regular array of objects using .sort(), I am facing a challenge with an observable object that I am not accustomed to. My task involves retrieving a JSON array of objects with a service: import { Injectable } from ...

Updating data in React Native fails to activate useEffect, leading to the screen not being refreshed

I'm facing a challenge while working on a recipes app using Firebase Realtime database. I have a functional prototype, but I am encountering an issue where the useEffect hook does not trigger a reload after editing the array [presentIngredients]. Her ...