Stuck on code: How to make my alert work inside my if

JavaScript
1

I’ve been stuck on this function declaration for a bit. I’ve been trying out some code I got from an earlier question and it worked at first but now it’s malfunctioning ever since I forgot to place a }. I was wondering if someone could help me out. Once again, sorry is my code seems simple; I just a kid who moved on from scratch a while ago. Here is my code

var dice = document.getElementById("dice").addEventListener("click", numChange);

function numChange() {
  alert(Math.floor(Math.random() * 6 + 1));
}


let circle = document.querySelector(".man");
let moveBy = 25;

window.addEventListener("load", () => {
  circle.style.position = "absolute";
  circle.style.left = 0;
  circle.style.top = 0;
});



function verifyPosition(circleLeftPosition, circleRightPosition, moveBy){
  console.log(circleLeftPosition, circleRightPosition);
  if(circleLeftPosition =='550px' && circleRightPosition =='75px'){
    alert('working');
    // STILL not working
  };
};


window.addEventListener("keyup", (e) => {
  switch (e.key) {
    case "ArrowLeft":
    // verifyPosition(circle.style.left, circle.style.top, moveBy)
      circle.style.left = parseInt(circle.style.left) - moveBy + "px";
      break;
    case "ArrowRight":
    // verifyPosition(circle.style.left, circle.style.top, moveBy)
      circle.style.left = parseInt(circle.style.left) + moveBy + "px";
      break;
    case "ArrowUp":
    // verifyPosition(circle.style.left, circle.style.top, moveBy)
      circle.style.top = parseInt(circle.style.top) - moveBy + "px";
      break;
    case "ArrowDown":
     // verifyPosition(circle.style.left, circle.style.top, moveBy)
      circle.style.top = parseInt(circle.style.top) + moveBy + "px";
      break;
  };
});

.board {
  display: grid;
  justify-content: center;
  align-content: center;
  //grid-gap: 1rem;
  grid-template-columns: repeat(5, 10vw);
  grid-template-rows: repeat(5, 10vw);
  color: grey;
  background-color: grey;
  font-family: Dosis, sans-serif;
}

.link {
  font-family: Dosis, san-serif;
}

* {
  font-family: "Dosis", "san-serif";
}

.square:nth-child(1) {
  grid-row: 1;
  grid-column: 1;
}

.square:nth-child(2) {
  grid-row: 1;
  grid-column: 2;
}

.square:nth-child(3) {
  grid-row: 1;
  grid-column: 3;
}

.square:nth-child(4) {
  grid-row: 1;
  grid-column: 4;
}

.square:nth-child(5) {
  grid-row: 1;
  grid-column: 5;
}

.square:nth-child(6) {
  grid-row: 2;
  grid-column: 5;
}

.square:nth-child(7) {
  grid-row: 3;
  grid-column: 5;
}

.square:nth-child(8) {
  grid-row: 4;
  grid-column: 5;
}

.square:nth-child(9) {
  grid-row: 5;
  grid-column: 5;
}

.square:nth-child(10) {
  grid-row: 5;
  grid-column: 4;
}

.square:nth-child(11) {
  grid-row: 5;
  grid-column: 3;
}

.square:nth-child(12) {
  grid-row: 5;
  grid-column: 2;
}

.square:nth-child(13) {
  grid-row: 5;
  grid-column: 1;
}

.square:nth-child(14) {
  grid-row: 4;
  grid-column: 1;
}

.square:nth-child(15) {
    grid-row: 3;
    grid-column: 1;
  }

.square:nth-child(16) {
    //grid-row: 2;
    //grid-column: 1;
  }

 Demo Specific Style
.board {
  padding: 1em 0;
}

.square {
  background: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
}
.man {
  position: absolute;
  top: 0px;
  right: 0px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: black; 
}
/* .man2 {  */ 
  position: absolute;
  top: 410px;
  right: 545px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: black;
  animation: up 9s infinite;
  animation-delay: 8.5s;
}
 .man3 { 
  position: absolute;
  top: 100px;
  right: 545px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: black;
  animation: right2 9s infinite;
  animation-delay: 17s;
}


@keyframes right {
  from {right: 240px;}
  to {right: 540px;}
  0% {
    background-color: black;
  }
  50% {
    background-color: black;
  }
  75% {
 
    background-color: black;
  }
  100%{
    background-color: #C0C0C0;
  }
  }


  


.dice {
  width: 50px;
  height: 50px;
  background-color: white;
  position: absolute;
  right: 440px;
  top: 320px;
}

numChange {
  
}
.inside-board {
  position: absolute;
  height: 42%;
  width: 30%;
  background-color: red;
  top: 145px;
  right: 290px;
}
.q1 {
  position: absolute;
  top: 440px;
  right: 200px;
}

<div class="man"></div.
<div class="man2" id="seen"></div>
<div class="man3" id="Seen"></div>
<div class="dice" id="dice"></div>
<div class="inside-board"></div>

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght@500&display=swap" rel="stylesheet">
<a href="https://cdpn.io/Dims09/debug/mdOXGrQ/xnMabmBRoVjr">
  <h3 class="link">Back</h3>
</a>
<div class="board">
  
  <div class="square">START</div>
  <div class="square">blank</div>
  <div class="square">guardian</div>
  <div class="square">blank</div>
  <div class="square">LAVA</div>
  <div class="square">blank</div>
  <div class="square">NATIVE</div>
  <div class="square">blank</div>
  <div class="square">blank</div>
  <div class="square">wizard</div>
  <div class="square">blank</div>
  <div class="square">king</div>
  <div class="square">bank</div>
  <div class="square">EARTH</div>
  <div class="square">guardian</div>
  <div class="square">blank</div>
  <h1 class="board">STORIE</h1>
  
  
  <div class="q1" id="q1">
    <ul>
      <li>Who created the internet?</li>
      <li><a heref="#">Bob Khan</a></li>
      <li><a heref="#">Vint Cerf</a></li>
      <li><a heref="#">Both Bob Khan and Vint Cerf</a></li>
    </ul>
  </div>
  <div></div>
3

@camperextraordinaire ,

Thank you for specifying your problem with my question. My exact malfunction is that once my dot has reached the certain coordinates programed, it does nothing, instead of giving me a popup window on my browser.
Does this help you?

Thanks,
Dimitri J. Portilla

4

It only gives you a popup window because that’s all your function does:

function verifyPosition(circleLeftPosition, circleRightPosition, moveBy){
  console.log(circleLeftPosition, circleRightPosition);
  if(circleLeftPosition =='550px' && circleRightPosition =='75px'){
    alert('working');
    // STILL not working
  };
};

The question is, what do you want to happen instead, once the circle reaches that position?

5

@jsdisco,

Thank for replying. My problem is that my code is not working, I see no popup even though I saw one before. I know it’s not a linking problem, since I’m using codepen.
Can you see another problem with my code? I hope my answer has helped you understand my problem.
Thanks,
Dimitri J. Portilla

6

Your code is a bit confusing, can you provide a link to your codepen so it’s easier to see what exactly you’re working with?

The problem I see:

In the switch of your keyup event handler, you always pass this as parameters to the verify function:

verifyPosition(circle.style.left, circle.style.top, moveBy)

So you pass the left and top values.

But your verify function checks for left and right, not for left and top:

function verifyPosition(circleLeftPosition, circleRightPosition, moveBy) {
  ...
}

To begin with, I’d make the .man a child of the .board, so it moves relative to the <board> and not relative to the whole <body>. Again, a link to codepen would really help.

7

@jsdisco,

Thank you for your suggestion, it’s being put to work currently. About the link to my codepen, here it is:

https://codepen.io/Dims09/pen/qBqLbez?editors=0010

Thank you for trying your best,
Dimitri J. Portilla

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.