How can I use conditions to 'show' / 'hide' elements in my code

Hi I’m trying to get this a banner to popup letting a player know they lost game if the conditions within my if statement are both true.

The idea is, the game is run on a timer (specifiedNumber) , and if the score is less than 5 when the timer hits the specifiedNumber. You lose the game and the loseBanner pops up. Can someone tell me why this isn’t working?

var counter = document.getElementById('counter');
//selects HTML '0'
var count = 0;
//sets count to '0'
var specifiedNumber = 7;
//max number on timer we want to reach
var scoreCount = document.getElementById('score');
var score = 0;
var increasing = true;

//select Win and Lose Banners
var winBanner = document.getElementById('win');
var loseBanner = document.getElementById('lose');

winBanner.style.display = 'none';
loseBanner.style.display = 'none';


  setInterval(function(){
    increasing === true ? count++ : count = 0;
    counter.innerHTML = count;
    count === specifiedNumber ? increasing = false : increasing = true;
  }, 1000)


  function losingBanner() {
      scoreCount.innerHTML = score;
    if(count === specifiedNumber && score < 5 ) {
      loseBanner.style.display = 'show';
    }
  }

My CSS:

.lose-banner{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5rem;
    height: 200px;
    width: 400px;
    background: rgba(255, 0, 0, 0.363);
    border-radius: 2rem;
    
}

HTML:

<div class="main-container">
    <div class="count-container">
    <div id = 'counter' class='counter'>0</div>
    </div>

    <div class="score-container">
    <div id='circles-clicked' class="circles-clicked">Circles clicked : </div>
    <div id='score' class="score">0</div>
    </div>

    <div id='win' class='win-banner'>You Win!</div>
    <div id='lose' class='lose-banner'>You Lose!</div>
    
</div>

Hi can you add your full code, meaning your HTML markup. So other developers can easily read your code and do testing.

You also have a typo on this line

loseBanner.style.display = 'show';
// To display/show an element you should use "block" 
// loseBanner.style.display = 'block';

You also have an error in this line of code, on your HTML you dont have that id’s element associated with your script. That is why its giving an error.

error: TypeError: winBanner is null

Also, when/where are you calling the losingBanner function?

Hi imedieta thanks for responding. I changed the loseBanner.style.display to equal ‘block’ and nothing changed. Also I’m a little confused by what you mean when you say it’s not associated with my script. I have the winBanner stored in variable, I just haven’t written the function yet. Could you explain what you mean please I’m a bit confused?

EDIT: also added my HTML

Hi lasjorg, you’re right I didn’t call it.

  function losingBanner() {
      scoreCount.innerHTML = score;
    if(count === specifiedNumber && score < 5 ) {
      loseBanner.style.display = 'block';
    }
  }
  losingBanner();

I just tried like this, but I still couldn’t get the banner to pop up. Is there something else I’m missing?

You are calling the function one time when the code first runs. More likely it should run at some condition or continuously inside the setInterval.

Can you please post a live version of the code on something like Codepen because I’m a little confused about how the game is supposed to work. There must be more code then what you have posted, right? For example, I see nothing that would increase the score.

Thanks for getting back to lasjorg. I can definitely understand why my code would be confusing. At the moment everything I have posted is the entirety of my code. As a beginner I like to break my code into small parts and solve one problem at a time. You’re right as of now I have implemented nothing to increase the score.
The only problem I’m trying to solve now is how can I get the ‘loseBanner’ to pop up onto my screen when the conditions in my losingBanner function are met.

Sorry if this is really confusing. I really appreciate your responses though! I will make a codepen account and post it here.

Also my idea of the rules of the game, most have which I have not gotten to yet:

A very simple game designed only to give me practice in javascript.

  • There will be (not yet implemented) circles that appear randomly on the screen.

  • Every click of a circle results in a point.

  • You have 7 seconds (specifiedNumber) to click on 5 circles and earn a score of 5 points . If you don’t reach a score of 5 in 7 seconds you lose the game.

Edit: I think this link should work. https://codepen.io/jtog95/pen/ExPbzvo

Hi @Jtog
Yes you have change your code to:

loseBanner.style.display = "block';
  1. What i mean by that its that you just had a “typo” meaning that’s how it should be writing correctly with block. Now that does not mean it will work because there is still some issues with your code.

  2. The winBanner stored variable came with an error because you did not had your html thats why the script could not read the HTML id variable.

  3. We will try to figured out what you trying to accomplish, maybe a similar solution will be good, what you think @lasjorg since you have a more experience approach to this.

I think you may have to implement more of the game logic, otherwise, you don’t have the right context for making decisions about how to implement various features, like the loose banner.

Making it show up isn’t a problem you can just call the function inside setInterval. But right now you just have a continuously running setInterval so there isn’t much to go on. You will have to break out of the setInterval, which means you will need a way to start and stop it. You would likely also have a start and stop button.

Example code
setInterval(function () {
  loseBanner.style.display = "none";
  counter.style.display = "block";
  increasing === true ? count++ : (count = 0);
  counter.innerHTML = count;
  count === specifiedNumber ? (increasing = false) : (increasing = true);
  if (count === specifiedNumber && score < 5) {
    losingBanner();
  }
}, 1000);

function losingBanner() {
  scoreCount.innerHTML = score;
  counter.style.display = "none";
  loseBanner.style.display = "block";
}

Let me start by saying thank you, my first problem has been solved. Yes you’re definitely right the game does need to be developed a little bit further. lasjorg I was wondering is there a way to directly message you on here? Trying to make this game inevitably I will run into more problems I am not yet capable of solving, and a more experienced hand would be very helpful. I completely understand if you don’t want to do that though.

Anyways thank you lasjorg and imendieta!

You are welcome to PM me, but I can’t give you any guarantees to if/when I can answer you. If you click a user name there should be a Message button on the profile page.

You can always open a new thread as well. There are plenty of helpful people on here all the time.

Hi @Jtog
Yes i also think like @lasjorg i see that your game logic its not quite well structured, and need more information but, i think the game can be done in a different approach, PM since this will be far more timing for this to accomplish, and we don’t want to get in the way with other developers when they are asking or helping each other related to other questions.

Also will be good like you said you like to work step by step and trying to work on the code by parts so will be good to open treads on asking help, here on the forum there is well talented people and experience, i always also ask for help when i have questions or don’t know how to work on a certain problem.

Thanks for the support imendieta. Hey I was wondering as far as structuring code the right way, is there a resource or book that you are aware of that can teach me how to do it?

Hi there!,

Sorry for the late reply, I do believe by structuring code will come as you learn i know its kind of hard to understand whats going on right now, but the best way to get a good knowledge and to understand the structure, its to read books and tutorials. i will give you some links were i learn to do it, this site FCC its good i learn a lot i think thats one of the main ones, its better right now to get all the syntax then structuring will come alone, don’t panic or rush take time to first understand sintax and trying to get familiar with code then, you will understand structuring. as far as structuring its concern its to get hoisting and scope(this is what you are talking about).

Hoisting and Scope:
https://hackernoon.com/scope-hoisting-in-javascript-19b991babc4f


W3 schools:
https://www.w3schools.com/js/default.asp
JavaScript.info: This one its really good i suggest work on the lectures and problems also talks about scope and hoisting.
https://javascript.info/
Youtube:
There is lots of lectures and videos where you can learn from people who are good on structuring code and how they do their web apps.

Hope this helps.