🐛 Overlapping Information

[philsinatra]

I'm just having one remaining problem. So when I run the page once (put in a date, press submit, get a zodiac sign), it works. When I close it and run it again, it works. When I close it a second time and run it a third, the current and previous picture and description overlap. They keep piling up as I run it more times. I was having this problem earlier and thought I fixed it, but the solution somehow only applies to the first time I close it. I've been looking at it all day and still can't figure out why this is going on. Any ideas?

Run the submitHandler the first time, your HTML updates as follows:

<div class="overlay overlayTransition" id="overlay" style="top: 0px;">
        <!-- Individual content goes here -->
        <button type="button" class="closeButton" id="closeButton">
                Close
        </button>
<img id="pic" src="images/mulan2.png" alt="You are Mulan" class="pic"><h3 id="title" class="title">Hannah, you are Mulan</h3><p id="desc" class="desc">As an Aries, you are independent and courageous. Fueled by fire and the will to achieve, you are capable of accomplishing anything. Like Mulan, you are a trailblazer who doesn’t let others hold you back. Keep being fearless and fighting for your beliefs.</p></div>

Run the submitHandler a second time, your HTML updates as follows:

<div class="overlay overlayTransition" id="overlay" style="top: 0px;">
  <!-- Individual content goes here -->
  <button type="button" class="closeButton" id="closeButton">
    Close
  </button>
  <img id="pic" src="" alt="" class="pic">
  <h3 id="title" class="title"></h3>
  <p id="desc" class="desc"></p><img id="pic" src="images/moana.png" alt="You are Moana" class="pic">
  <h3 id="title" class="title">HannahYou are Moana</h3>
  <p id="desc" class="desc">Scorpios are often seen as intense, and question everything. Like Moana, they are the investigators of the zodiac. Your combination of determination and curiosity means you are always looking for answers and working towards a goal. You are a master of your own life, and passionately move past all that stands in your way.</p>
</div>

Instead of updating the content within the original #pic, #title and #desc elements, you are creating a second instance of each of these elements. There are now two elements on the page that have the same ids. When you run the submitHandler a third time:

<div class="overlay overlayTransition" id="overlay" style="top: 0px;">
  <!-- Individual content goes here -->
  <button type="button" class="closeButton" id="closeButton">
    Close
  </button>
  <img id="pic" src="" alt="" class="pic">
  <h3 id="title" class="title"></h3>
  <p id="desc" class="desc"></p><img id="pic" src="images/moana.png" alt="You are Moana" class="pic">
  <h3 id="title" class="title">HannahYou are Moana</h3>
  <p id="desc" class="desc">Scorpios are often seen as intense, and question everything. Like Moana, they are the investigators of the zodiac. Your combination of determination and curiosity means you are always looking for answers and working towards a goal. You are a master of your own life, and passionately move past all that stands in your way.</p><img id="pic" src="images/aurora.png" alt="You are Aurora" class="pic">
  <h3 id="title" class="title">HannahYou are Aurora</h3>
  <p id="desc" class="desc">The Pisces is sometimes seen as an otherworldly being. Sensitive and reserved, you enjoy daydreaming and escaping from reality. The introverted Aurora didn’t mind growing up in a forest cottage with only three fairies and some local animals for company, and spent the time living in her imagination. You would probably also enjoy some time away from your busy life, going with the flow and singing to the birds.</p>
</div>

There are now three instances of all of these ids. When you run closeWindow, your script is clearing the values for #pic, #title and #desc, but it's only able to do it for the first instance of each of these elements. The others are not cleaned, which is why the content is overlapping.

You need to fix your script so there is only one instance of the #pic, #title and #desc elements. Each time you show a different princess, you should be editing the content within these containers, not creating new instances of each.

[hannahmystic]

This was the most helpful help ever given! Thank you so much for these three thorough responses. With these, I was able to fix all my problems, and you seemed to anticipate and hint at problems I was going to have, and I got those too. This was everything I needed! You rock 🎯