JavaScript CSS HTML - Click event functioning on a single div

Question

JavaScript CSS HTML - Click event functioning on a single div

How can I shrink the right side div when the left navigation menu is open? Here are the code examples,

HTML :

<div id="home" class="full"><p>Home</p></div>
<div id="about" class="full"><p>About</p></div>
<div id="portfolio" class="full"><p>Portfolio</p></div>
<div id="skills" class="full"><p>Skills</p></div>
<div id="contact" class="full"><p>Contact</p></div>

Css :

.full{height: 100vh;color: #fff;}
.PageShrink{margin-left: 30vh;}

JS:

const fullPage = document.querySelector('.full');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
  if(!menuOpen) {
    fullPage.classList.add('PageShrink');
    menuOpen = true;
  } else {
    fullPage.classList.remove('PageShrink');
    menuOpen = false;
  }
});

When clicking on the menuBtn to slide in from the left, the Home section shrinks by 30vh as expected. However, it seems that subsequent clicks on About, Portfolio, etc., do not trigger the shrinking effect even though they have the same class applied. The issue only works on the first div i.e., home. Any assistance would be greatly appreciated.

Thank you for your help!

javascript html css

Answer 1

Answer №1

It appears that the issue lies in your JavaScript code. The use of querySelector only targets the first element with that class, so you should consider using querySelectorAll instead. However, keep in mind that this method returns an array of all elements, and any changes made will still only affect the first element. To apply changes to all elements with that class, you need to loop through each one using the following code:

fullPage.forEach(el => el.classList.add('PageShrink'));

const fullPage = document.querySelectorAll('.full');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
  if(!menuOpen) {
    fullPage.forEach(el => el.classList.add('PageShrink'));
    menuOpen = true;
  } else {
    fullPage.forEach(el => el.classList.remove('PageShrink'));
    menuOpen = false;
  }
});

To demonstrate and test:

function caseA() {
  document.querySelector(".test").style.color = "red";
}

function caseB() {
  document.querySelectorAll(".test").style.color = "green";
}

function caseC() {
  document.querySelectorAll(".test").forEach(el => el.style.color = "blue");
}

<ul>
  <li class="test">Test</li>
  <li class="test">Test</li>
  <li class="test">Test</li>
  <li class="test">Test</li>
  <li class="test">Test</li>
</ul>

<button onclick="caseA()">querySelector</button>
<button onclick="caseB()">querySelectorAll</button>
<button onclick="caseC()">querySelectorAll + forEach</button>

You'll notice that "Case A" only targets the first element, while "Case B" will result in an error as querySelectorAll returns an array of elements, not a single element. By using forEach, you can apply your JavaScript command to all elements in the array, ensuring it is executed on every individual element.

Answer 2

It appears that the issue lies in your JavaScript code. The use of querySelector only targets the first element with that class, so you should consider using querySelectorAll instead. However, keep in mind that this method returns an array of all elements, and any changes made will still only affect the first element. To apply changes to all elements with that class, you need to loop through each one using the following code:

fullPage.forEach(el => el.classList.add('PageShrink'));

const fullPage = document.querySelectorAll('.full');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
  if(!menuOpen) {
    fullPage.forEach(el => el.classList.add('PageShrink'));
    menuOpen = true;
  } else {
    fullPage.forEach(el => el.classList.remove('PageShrink'));
    menuOpen = false;
  }
});

To demonstrate and test:

function caseA() {
  document.querySelector(".test").style.color = "red";
}

function caseB() {
  document.querySelectorAll(".test").style.color = "green";
}

function caseC() {
  document.querySelectorAll(".test").forEach(el => el.style.color = "blue");
}

<ul>
  <li class="test">Test</li>
  <li class="test">Test</li>
  <li class="test">Test</li>
  <li class="test">Test</li>
  <li class="test">Test</li>
</ul>

<button onclick="caseA()">querySelector</button>
<button onclick="caseB()">querySelectorAll</button>
<button onclick="caseC()">querySelectorAll + forEach</button>

You'll notice that "Case A" only targets the first element, while "Case B" will result in an error as querySelectorAll returns an array of elements, not a single element. By using forEach, you can apply your JavaScript command to all elements in the array, ensuring it is executed on every individual element.

JavaScript CSS HTML - Click event functioning on a single div

Answer №1

Similar questions

How can I change the padding that is being inherited from "@ .MuiAlert-icon"?

Tips for transforming a navigation link pill into a hyperlink:

What is the best way to eliminate specified users from the list of command arguments?

What is the best way to utilize v-model to set values within a 2D array?

Creating a central navigation menu for a website

Save the values of the first and second characters in two separate variables

HashId plugin for Angular

A JQuery function linked to the click event of the body element triggers another click event right away

What is the best way to show a specific page using router-view?

Tips for effectively submitting a form to Flask using AJAX

Blender Mesh Not Visible in Three.js

I am looking for a way to retrieve the ids of all div elements that have the same x coordinate using document.elementFromPoint in JavaScript. Can someone help me with

SwipeJS is not compatible with a JQuery-Mobile web application

Create a roster of numbers that are multiples using a systematic approach

Performing an action once all AJAX requests have finished

Updating the database table using javascript

encountering plupload issue during file upload

What is the best way to activate ui-sref in an AngularJS unit test?

Is a Circular Logo Aligned in the Middle of the Navigation Bar?

What specific CSS attribute changes when an element is faded out using jQuery's FadeOut method?