Question 195741 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript in react causes website to collapse when the page reloads

I wrote Javascript to create a toggle button from an image to pop out a full-screen navigation bar.

Javascript

const menuHamburger = document.querySelector(".menu-hamburger")
const navLinks = document.querySelector(".nav-links")

     menuHamburger.addEventListener('click',()=>{
     navLinks.classList.toggle('mobile-menu')
     })

This was placed in after all the imports of the react main app.js file

What this does is it removes the margin left:-100% that was set in the nav links (vertical navigation bar) to make it appear by adding a class of margin:0 in media queries.

This is the navigation bar css.


.mobile-menu{
margin:0
}

@media screen and (max-width: 900px){

     .mobile-menu{
      margin-left:0;
     }
.nav-links{
  position:absolute;               /*Applied  to Li elements.*/
  background-color:rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  width:100%;
  top:0;
  left:0;
  justify-content:center;
  align-items:center;
  display:flex;
  margin-left:-100%;
  transition: all 0.5s ease;
  height:100vh;

}

Media Queries

Though it works when I reload the page it removes all the elements in the body.

Also the blurry vertical navigation bar is supposed to blur all the elements however some text are very clear.
If this is not enough Code Sandbox.

Adding on, the code shows no errors though everything is missing.

I expect to have a blurry navigation bar that blurs all the elements.

I tried removing the Javascript from the website and it was full functional but when I put it back it disappears.

Tags:

2

Answers


  1. 0

    The index.js file that inserts all the React code into the ID ‘root’ is missing

    That should look something like this

    import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App/>)
    Login or Signup to reply.
  2. 0

    The first issue is that you are missing index.js file, so create it with the following configuration

    import App from "./App";
import ReactDOM from "react-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

    Second, using querySelector() is not a good practice in react, however, you can easily do that, read more. It is showing an error because the query selector is trying to access the value before it is rendered, you may use useEffect() to tackle this.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search