Html Question posted in
Some basic documentation can be found here.

Html – Div not appearing when clicking on a button

I am kinda new to programming, so I’m sorry if my question is silly or the code I’ll send is not perfect. I’m trying to build a simple web app in Flask that allows to track your CO2 emissions by inserting some information about your everyday consumptions.

Now, I have a few buttons (for example id="nuovaEmissione") that when clicked a div in the center of the page appears (using javascript .add("active") to the display property of the div) and lets you do other stuff. I applied the same, identic logic to another button (id="obiettivoMensile") and for some reasons the div would not appear.

Please, I’m losing my mind on this, I checked everything. The logic is the same of the other button, but it doesn’t work. What can I do?

I tried to check the names of the variables, some spelling mistakes in the javascript but everything is okay. I even asked chatgpt to solve the problem and it says that everything is correct.

document.getElementById('obiettivoMensile').addEventListener('click', function() {
  document.getElementById('setObiettivo').classList.add('active');
});
#setObiettivo {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}

#setObiettivo.active {
  display: block;
}
<div>
  <button id="obiettivoMensile" class="btn btn-success btn-sm">imposta</button>
</div>
<div id="setObiettivo">
  ciao
</div>
Tags:

2

Answers


  1. 0

    I tried out your code and it seems to be working fine. Check your html file, tags and attributes to make sure that they are correct and pointing to the correct files.

    Login or Signup to reply.
  2. 0

    Maybe this is not what you were looking for, but it seemed to me that your question was not complete in the way that you mentioned multiple buttons and divs but you didn’t include them in your snippet. In cases like this it is almost always better, not to work with individual ids as this might tempt you to repeat yourself unnecessarily. Instead you should work with classes and the sequence numbers of your buttons and divs.

    The below snippet is a short example of how you can achieve more functionality with fewer lines of code. And the code is easily extensible.

    const divs=document.querySelectorAll(".divs");
document.querySelectorAll(".btn")
 .forEach((b,i)=>b.addEventListener('click', ()=>divs[i].classList.toggle("active")));
divs.forEach((d,i)=>d.style.left=(15+i*35)+"%");
    .divs {
  display: none;
  top: 50%;
  position:absolute;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}
.divs.active{ display:block }
    <div>
  <button class="btn">obi</button>
  <button class="btn">nuo</button>
  <button class="btn">emi</button>
</div>
<div class="divs">obi</div>
<div class="divs">nuo</div>
<div class="divs">emi</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search