Ask coding questions

← Back to all posts
Storie
Braza (0)

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);
JS
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;
};
});
CSS
.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;
}
HTML

<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:[email protected]&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>
Comments
hotnewtop
xxpertHacker (861)

Remove all of the code from the post, and put it in a Repl, please.

And run a formatter across all of it :)

Braza (0)

@xxpertHacker

I have done what you have said. Here is the link to the Real:
https://replit.com/@Braza/Boardio-help-code