Question

0

132

Views

Drop down Menu in Javascript

I've console.logged the 'count' which prints '1' when I click the button once; However, when I click the button a second time the 'count' still reads '1';

I've been stuck on this for a while (my brain is fried);

index.html

<button id='btn'>Show Yourself</button>
<div class='drop__down'>
  <span>Yay! You found me.</span>
</div>

style.css

body {
  background: url('https://wallpapercave.com/wp/wp6242088.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: 0;
}
.container { 
  position: absolute;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  #btn {
    margin: 0 auto;
    width: 25%;
    padding: 1rem 2rem;
    color: black;
    border-radius: 0.5rem;
    background-color: rgba(255,255,255,0.4);
    backdrop-filter: blur(10px);
    border: none;
  }
  .drop__down {
    width: 25%;
    border: 1px solid #ccc;
    margin: 2rem auto 2rem auto;
    padding: 3rem;
    border-radius: 0.5rem;
    background-color: rgba(255,255,255,0.4);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: none;
  }
  span {
    color: black;
    font-size: 1rem;
  }
}

main.js

const btn = document.querySelector('.btn');
const div = document.querySelector('.drop__down');

let count = 0;

btn.addEventListener('click', function() {
  if (count === 0) {
      count += 1;
      div.style.display = 'none';
  } else {
      count -= 1;
      div.style.display = 'block';
  }
});

Edit: CodePen of Project

about 4 years ago · Juan Pablo Isaza

3 answers

Answer question

0

<button id='btn'>Show Yourself</button>

you have given id id='btn' and you are trying to read document.querySelector('.btn'); ".btn"

"." - class
"#" - id

`document.querySelector('#btn');`

either try # or change id to class

about 4 years ago · Juan Pablo Isaza Report

0

Hey would be great if you could let us know what kind of operation would you like to do with this function.

Right away from what I can see,

If the count variable is initialized at 0, and when the event "mouse click" occurs, It would count it up to 1. Which seems to be your desired result.

I think some code clean up would be good to help us see the logic in your code as well

If you want to have a function that just increments you can simply just do this

btn.addEventListener('click', function() {
  count += 1;
});

about 4 years ago · Juan Pablo Isaza Report

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-13T10:59:50.186Z

I hope if you do some significant changes on JavaScript code just as I done below then the problem can be sorted up ✌:

const btn = document.querySelector('#btn');
const div = document.querySelector('.drop__down');

let count = 0;

btn.addEventListener('click', function() {
  if (count == 0) {
      count = 1;
      div.style.display = 'block';
  } else {
      count = 0;
      div.style.display = 'none';
  }
});

#btn {
  padding: 2rem 3rem;
  color: black;
  border-radius: 0.5rem;
  background-color: rgba(255,255,255,0.4);
  backdrop-filter: blur(10px);
}
.drop__down {
  padding: 3rem;
  border-radius: 0.5rem;
  background-color: rgba(255,255,255,0.4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: none;
}
span {
  color: black;
  font-size: 1rem;
}

<button id='btn'>Show Yourself</button>
<div class='drop__down'>
  <span>Yay! You found me.</span>
</div>

0

132