After pressing the button to access the sidebar, all I see is a plain white screen

I've been diligently working on a school project, but I'm encountering some issues with the Sidebar button in the top left corner. Whenever I click on the button, it opens up to display a blank white page. Can anyone provide me with some assistance?

function open() {
  document.getElementById("sidebar").style.display = "relative";
}

function close() {
  document.getElementById("sidebar").style.display = "none";
}
#sidebar {
  display: none;
  height: 100%;
  width: 10%;
  background-color: #3c1642;
  justify-self: left;
}
<nav id="navBar" class="menuBar">
  <button onclick="open()" style="border: 0px; background-color: #272640;">
      <div class="menuBar" >
          <div class="menu-inner">
          <span class="bar bar-1" id="br1"></span>
          <span class="bar bar-2" id="br2"></span>
          <span class="bar bar-3" id="br3"></span>
          </div>
      </div>
  </button>

  <div class="menuOptions" style="flex-grow: 5; border-right: 0px; align-self: left;">
  </div>
  
  <div id="head" class="menuOptions" style="flex-grow: 3; border-left: 0px; border-right: 0px; align-self: center; 
                justify-content: center; position: relative;">
    <a href="" style="text-decoration:none; text-decoration-color: #f72585; ">WD BOOTCAMP</a>
  </div>
  
  <div class="menuOptions" style="flex-grow: 3; justify-content: end; border-left: 0px; align-self: right; ">
    <a class="menuBut" style=" border: 3px solid #f72585; border-top: 0px; border-bottom: 0px;"></a>
    <a class="menuBut"></a>
    
    <form action="" style="display: flex; justify-self: end; height: 30%; margin-top: 30px;">
      <input type="text" id="searchBar" placeholder="search">
    </form>
  </div>
</nav>

<div id="sidebar">
  <button onclick="close()">Close X</button>
  <a href="">link1</a>
  <a href="">link2</a>
  <a href="">link3</a>
</div>

javascripthtmlcss

Answer №1

Some key areas that require attention include:

  • Make sure to specify type="button" on all your button elements to prevent default submission behavior of the form.
  • If you are not submitting data elsewhere, consider removing the unnecessary form element.

Additionally, try to avoid inline styles as they can be difficult to override and lead to code duplication. Instead, utilize CSS classes for styling and use JavaScript's .addEventListener() method to handle events.

const sidebar = document.getElementById("sidebar");

sidebar.querySelector("button").addEventListener("click", function(){
  sidebar.classList.add("hidden");
});

document.querySelector("button.butStyle1").addEventListener("click", function(){
    sidebar.classList.remove("hidden");
});
#sidebar {
  height: 100%;
  width: 10%;
  background-color: #3c1642;
  justify-self: left;
}

.hidden { display: none; }

.menuOptions {
  flex-grow: 3; 
  border-left: 0px; 
  border-right: 0px; 
  position: relative;
}

.flexStyles1 {
  align-self: center; 
  justify-content: center; 
}

.flexStyles2 {
  align-self: right; 
  justify-content: end; 
}

.butStyle1 { border: 0px; background-color: #e0e0e0; }

.form { display: flex; justify-self: end; height: 30%; margin-top: 30px; }
<nav id="navBar" class="menuBar">
  <button type="button" class="butStyle1">
      <div class="menuBar" >
          <div class="menu-inner">
            <span class="bar bar-1" id="br1">x</span>
            <span class="bar bar-2" id="br2">y</span>
            <span class="bar bar-3" id="br3">z</span>
          </div>
      </div>
  </button>

  <div class="menuOptions" style="flex-grow: 5; border-right: 0px; align-self: left;">
  </div>
  
  <div id="head" class="menuOptions flexStyles1">
    <a href="" style="text-decoration:none; text-decoration-color: #f72585; ">WD BOOTCAMP</a>
  </div>
  
  <div class="menuOptions flexStyles2">
    <a class="menuBut" style=" border: 3px solid #f72585; border-top: 0px; border-bottom: 0px;"></a>
    <a class="menuBut"></a>
    

      <input type="text" id="searchBar" placeholder="search">

  </div>
</nav>

<div id="sidebar" class="hidden">
  <button type="button">Close X</button>
  <a href="">link1</a>
  <a href="">link2</a>
  <a href="">link3</a>
</div>

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

Add a Time Stamp to the Ajax URL Query

I'm attempting to add a timestamp to my URL that is being called by AJAX every 5 seconds. The purpose is to prevent caching in Internet Explorer browsers. However, it seems like the AJAX call is not functioning properly now without any error messages. ...

javascriptajaxinternet-explorercaching

What is the best way to implement conditional hook usage in React?

Having two hooks at my disposal, useLocalStorage and useQuery, I find myself wondering about conditionally utilizing one of them based on an input prop. I'm considering writing the following: const [value, setValue] = localStorage ? useLocalStorage() ...

javascriptreactjsreact-hooks

Why won't my controller function fire with ng-click in AngularJS?

I'm having trouble getting a function to execute when my button is clicked. Despite the fact that this code appears correct, the function defined in my controller isn't being triggered. The code compiles without errors as shown in the console. A ...

javascriptangularjs

Question: How can I use the jQuery datepicker to ensure that the selected date remains in the

I recently created a webpage using a combination of HTML, PHP, and jQuery. The PHP script is designed to load all data where the date matches the one selected in the text input field generated by the jQuery datepicker. However, I encountered a problem whe ...

javascriptphpjqueryhtmldatepicker

Pulling the month name based on a specific year and week using Javascript

In my HTML form, there are two fields called Year and Week. When the user chooses a Year and Week from the dropdowns, I would like to show the corresponding Month Name for that specific year and week. Is there anyone who can assist me in retrieving the m ...

javascriptangulartypescriptangular8

VisualMap in ECharts featuring multiple lines for each series

If you'd like to view my modified ECharts option code, it can be found at this URL: Alternatively, you can also access the code on codesandbox.io : https://codesandbox.io/s/apache-echarts-demo-forked-lxns3f?file=/index.js I am aiming to color each l ...

javascriptecharts

Using Ajax to implement a content slider with lightSlider

Seeking assistance in developing a dynamic content slider utilizing the LightSlider plugin. Currently, I have a script that fetches content from a database table (outputting JSON to HTML) and displays 6 div's of content per slide. However, I aim to di ...

javascriptjqueryhtmlajax

Adjusting solely the depicted data sets in the Highcharts.js library

I have a spline chart with 10 different curves on it - When the page is first loaded, none of the charts are visible as I have set "visible" to false. Users will then click on the curve(s) they want to see. I am looking for a way to dynamically change the ...

javascriptjquerypythonhighcharts

The protected routes within a React JS application consistently result in an undefined value

In my ProtectedRoute component for my react application, I am facing an issue with user authentication. I am using react-router-dom v6 to access the token from localStorage, but no matter what, the user variable always returns undefined. import { Outlet, N ...

javascriptreactjsreact-router-dom

Is it possible to access the HTML template prior to Outlook applying any additional classes during rendering?

I recently received an email template created in a different platform via Outlook. I am attempting to recreate this email in the Salesforce Marketing Cloud Platform, but I am encountering numerous unnecessary tables, classes set by Outlook (MsoNormal, Ms ...

htmlcssoutlookhtml-emailsalesforce-marketing-cloud

What is the best way to implement CSS rules for a hidden submenu?

Can anyone help me figure out how to apply CSS rules for a hidden submenu? I've attempted to use some JavaScript, but it's not working as expected. Below is a sample of the code I'm working with. The idea is that when you click on the anchor ...

javascriptjqueryhtmlcss

Having trouble with Next.js getStaticProps? Getting a TypeError that says "Cannot read properties of undefined (reading 'map')"?

My latest project was built using create-next-app as a base. In the Blog.js page, I attempted to fetch data from https://jsonplaceholder.typicode.com/posts by utilizing the getStaticProps() function. I followed the instructions provided in this guide: htt ...

javascriptreactjsnext.js

Trouble with AngularJS Smart Table when dealing with live data streams

Currently, I am facing a scenario where I am utilizing angularJs smart table for filtering. Here is the HTML code: <section class="main" ng-init="listAllWorkOrderData()"> <table st-table="listWorkOrderResponse"> <thead> ...

javascriptangularjssmart-table

Having trouble with incorporating a feature for uploading multiple images to the server

At the moment, I have a code snippet that allows me to upload one image at a time to the server. However, I am looking to enhance this functionality to be able to upload multiple images simultaneously. I am open to sending multiple requests to the server i ...

javascriptphpajaximage

Executing the OnChange event of the "Select" feature in Delphi with WebBrowser

In my Delphi project, I am using the WebBrowser component to navigate a HTML page that contains a ComboBox. Is there a way to trigger the OnChange event of the ComboBox? Here is how the ComboBox is structured: <select name="comboname" onchange="Some J ...

htmldelphicomboboxbrowser

Can Express not use await?

Why am I encountering a SyntaxError that says "await is only valid in async function" even though I am using await inside an async function? (async function(){ 'use strict'; const express = require("express"); const bodyParser = ...

javascriptnode.jsexpressecmascript-6

Tips for resolving the error message "TypeError: Converting circular structure to JSON"

I had a straightforward query where I needed to select all from the aliases table. Everything was working fine until I ran npm update. TypeError: Converting circular structure to JSON public async fetchAliases(req: Request, res: Response): Promise< ...

javascriptmysqlnode.jstypescriptexpress

Center alignment of text and images within the button's image

Can someone help me format my CSS properly? I have a button image where the text should be on the left side and another image on the right side. Currently, everything is centered. Thank you in advance. Here is the current code: button { /* padding- ...

htmlcss

Guide on integrating a JavaScript control (JavaScript package) obtained from GitHub into my asp.net application

Hello everyone, I am a newcomer to GitHub and have some basic questions to ask. Recently, I downloaded the package from https://github.com/jspreadsheet/ce in .zip format for using in my asp.net web application. However, I am not sure how to incorporate the ...

javascriptasp.netvisual-studionpm

The module specifier "logrocket" could not be resolved, make sure to use either npm or

I'm currently having an issue with initializing LogRocket. I followed the steps from the official documentation: I successfully installed it using node: npm i --save logrocket However, when trying to initialize it on my page earlier with: < ...

javascriptnpmmoduleyarnpkglogrocket