Develop Reference

Background Error fault when applying condition

So if x = Number value background changes fine, my question is when x has no value. How can I have a background-color of #ffffff. Currently, code is defaulting to #db0000.
JS:
var grid_value = document.getElementById("Vone").innerHTML;
var x = grid_value;
if (x >= 0 && x < 15) {
document.getElementById("GridA").style.backgroundColor = "#db0000";
} else if (x >= 15 && x < 25) {
document.getElementById("GridA").style.backgroundColor = "#f0ad4e";
} else if (x >= 25) {
document.getElementById("GridA").style.backgroundColor = "#5cb85c";
} else if (x = "Pick" ) {
document.getElementById("GridA").style.backgroundColor = "#0085eb";
} else if (x = "" ) {
document.getElementById("GridA").style.backgroundColor = "#ffffff";
}

Here you haven't given any conditions if x doesn't have a value, so the default condition is x=0.
You should try else if (!x).
else if (!x) {
document.getElementById("GridA").style.backgroundColor = "#ffffff";
}
Hope this helps you out.

const gA = document.getElementById("GridA");
document.getElementById("Vone").addEventListener("blur", function(event){
gA.classList = "";
var x = this.value;
if (x === "") {
gA.classList.add("white");
} else if (x === "Pick") {
gA.classList.add("color1");
} else if (x >= 0 && x < 15) {
gA.classList.add("color2");
} else if (x >= 15 && x < 25) {
gA.classList.add("color3");
} else if (x >= 25) {
gA.classList.add("color4");
}
});
#GridA { height:100px; border:1px solid grey; margin-top:5px; }
.color1 { background-color:#dbf000; }
.color2 { background-color:#f0ad4e; }
.color3 { background-color:#5cb85c; }
.color4 { background-color:#0085eb; }
.white { background-color:#ffffff; }
<input id="Vone">
<div id="GridA"></div>

Why does my event stop occuring after only one click?

I'm trying to make a tic tac toe game. The part where the computer choice is generated only occurs after one click, after that, no computer choice is generated.
For example, in the first picture, when I make the first move of placing an X in any of these boxes, a random O is displayed in another box which is what I intended.
But when I make the second move of placing an X on the middle box as shown in the second picture. No random O pops up in another box. The next moves I make also do not display a random O in other boxes.
#import url('https://fonts.googleapis.com/css2?family=Koulen&family=VT323&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Lobster&family=Signika+Negative:wght#400;500;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
text-align: center;
background-color: #1C2C54;
color: #D175B7;
font-family: 'Signika Negative', sans-serif;
}
main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
gap: 20px;
margin: auto;
position: absolute;
top: 50%;
bottom: 50%;
left: 50%;
right: 50%;
}
h1 {
font-family: 'VT323', monospace;
font-size: 3rem;
}
.text-container {
display: flex;
flex-direction: column;
width: 300px;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #4BC3B5;
padding: 20px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 30px;
font-size: 30px;
text-align: center;
cursor: pointer;
}
.button-container {
display: flex;
flex-direction: row;
gap: 10px;
}
button {
padding: 3px 20px;
background-color: #4BC3B5;
color: white;
border: 3px solid #34a396;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #2c8d82;
border: 3px solid #124640;
}
button:focus {
background-color: #2c8d82;
border: 3px solid #124640;
}
.score-container {
display: flex;
flex-direction: column;
gap: 10px;
width: 300px;
justify-content: center;
color: white;
}
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1190px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
button {
font-size: 1.5rem;
padding: 10px 25px;
}
.grid-container {
padding: 40px;
}
.grid-item {
padding: 40px;
font-size: 2rem;
}
}
#media (min-width:1281px) {
button {
font-size: 2rem;
padding: 10px 25px;
}
.grid-container {
padding: 40px;
}
.grid-item {
padding: 40px;
font-size: 2rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tic Tac Toe</title>
</head>
<body>
<main>
<div class="text-container">
<h1>Tic Tac Toe</h1>
</div>
<div class="grid-container">
<div class="grid-item" id="grid1"></div>
<div class="grid-item" id="grid2"></div>
<div class="grid-item" id="grid3"></div>
<div class="grid-item" id="grid4"></div>
<div class="grid-item" id="grid5"></div>
<div class="grid-item" id="grid6"></div>
<div class="grid-item" id="grid7"></div>
<div class="grid-item" id="grid8"></div>
<div class="grid-item" id="grid9"></div>
</div>
<div class="button-container">
<button id="x-el" onclick="selectX()">X</button>
<button id="o-el" onclick="selectO()">O</button>
</div>
<div class="score-container">
<p id="playerscore">Player Score:</p>
<p id="compscore">Computer Score:</p>
</div>
</main>
<script>
// Grab the elements
let xBtn = document.getElementById('x-el')
let oBtn = document.getElementById('o-el')
let playerScoreDisplay = document.getElementById('playerscore')
let compScoreDisplay = document.getElementById('compscore')
let x = 'X'
let o = 'O'
let userChoice;
let computerChoice;
// Grabbing individual boxes
let box1 = document.getElementById('grid1');
let box2 = document.getElementById('grid2');
let box3 = document.getElementById('grid3');
let box4 = document.getElementById('grid4');
let box5 = document.getElementById('grid5');
let box6 = document.getElementById('grid6');
let box7 = document.getElementById('grid7');
let box8 = document.getElementById('grid8');
let box9 = document.getElementById('grid9');
// Selecting x or o
function selectX() {
userChoice = x;
computerChoice = o;
alert('You selected X!');
}
function selectO() {
userChoice = o;
computerChoice = x;
alert('You selected O!');
}
// using arrays to loop through divs
function loopPositioning(array){
const randomIndex = Math.floor(Math.random()* array.length);
const item = array[randomIndex];
return item;
}
const array = [1,2,3,4,5,6,7,8,9];
const result = loopPositioning(array);
console.log(result);
// looping all divs
let boxes = document.querySelectorAll('div.grid-item').forEach(box => {
box.addEventListener('click', event => {
if (userChoice === x) {
box.innerHTML = x;
if (result == 1) {
box1.innerHTML = o;
} else if (result == 2) {
box2.innerHTML = o;
} else if (result == 3) {
box2.innerHTML = o;
} else if (result == 4) {
box4.innerHTML = o;
} else if (result == 5) {
box5.innerHTML = o;
} else if (result == 6) {
box6.innerHTML = o;
} else if (result == 7) {
box7.innerHTML = o;
} else if (result == 8) {
box8.innerHTML = o;
} else if (result == 9) {
box9.innerHTML = o;
}
} else if (userChoice === o) {
box.innerHTML = o;
if (result == 1) {
box1.innerHTML = x;
} else if (result == 2) {
box2.innerHTML = x;
} else if (result == 3) {
box2.innerHTML = x;
} else if (result == 4) {
box4.innerHTML = x;
} else if (result == 5) {
box5.innerHTML = x;
} else if (result == 6) {
box6.innerHTML = x;
} else if (result == 7) {
box7.innerHTML = x;
} else if (result == 8) {
box8.innerHTML = x;
} else if (result == 9) {
box9.innerHTML = x;
}
}
})
})
</script>
</body>
</html>
How do I make the computer choice consistently pick a random box every time I place my move?

the problem with your code is you are calling the loopPositioning() only onces when the code enters execution. so, you need to call the function everytime when a box is cicked.
here is your correct answer.
<script>
// Grab the elements
let xBtn = document.getElementById('x-el')
let oBtn = document.getElementById('o-el')
let playerScoreDisplay = document.getElementById('playerscore')
let compScoreDisplay = document.getElementById('compscore')
let x = 'X'
let o = 'O'
let userChoice;
let computerChoice;
// Grabbing individual boxes
let box1 = document.getElementById('grid1');
let box2 = document.getElementById('grid2');
let box3 = document.getElementById('grid3');
let box4 = document.getElementById('grid4');
let box5 = document.getElementById('grid5');
let box6 = document.getElementById('grid6');
let box7 = document.getElementById('grid7');
let box8 = document.getElementById('grid8');
let box9 = document.getElementById('grid9');
const array = [1,2,3,4,5,6,7,8,9];
var result;
// Selecting x or o
function selectX() {
userChoice = x;
computerChoice = o;
alert('You selected X!');
}
function selectO() {
userChoice = o;
computerChoice = x;
alert('You selected O!');
}
// using arrays to loop through divs
function loopPositioning(array){
const randomIndex = Math.floor(Math.random()* array.length);
const item = array[randomIndex];
return item;
}
console.log(result);
// looping all divs
let boxes = document.querySelectorAll('div.grid-item').forEach(box => {
box.addEventListener('click', event => {
if (userChoice === x) {
box.innerHTML = x;
result = loopPositioning(array);
if (result == 1) {
box1.innerHTML = o;
} else if (result == 2) {
box2.innerHTML = o;
} else if (result == 3) {
box2.innerHTML = o;
} else if (result == 4) {
box4.innerHTML = o;
} else if (result == 5) {
box5.innerHTML = o;
} else if (result == 6) {
box6.innerHTML = o;
} else if (result == 7) {
box7.innerHTML = o;
} else if (result == 8) {
box8.innerHTML = o;
} else if (result == 9) {
box9.innerHTML = o;
}
} if (userChoice === o) {
result = loopPositioning(array);
box.innerHTML = o;
if (result == 1) {
box1.innerHTML = x;
} else if (result == 2) {
box2.innerHTML = x;
} else if (result == 3) {
box2.innerHTML = x;
} else if (result == 4) {
box4.innerHTML = x;
} else if (result == 5) {
box5.innerHTML = x;
} else if (result == 6) {
box6.innerHTML = x;
} else if (result == 7) {
box7.innerHTML = x;
} else if (result == 8) {
box8.innerHTML = x;
} else if (result == 9) {
box9.innerHTML = x;
}
}
})
})
</script>
Now, as you can see the variable result have a value everytime a user clicked on the box. but i saw a bug on your code. you are not mark the visited box as visited before. So, even after you run this code you might see as the error you encountered before this is because it sets the innerHTML both x and 0 but modifies the previous visited boxes. So, you need to mark the visited box as marked.

reset a setinterval after once clicking keybored arrows

hi i want to make to move something like a car with setinterval but when i clicked the button after once
setinterval called again than its speed looks come more than after clicking so i want use one interval not more can help me?
i know answerd this question befor me but it didnt work for me or i cant use it im so tired about that
//variables
var m_tank = document.getElementById("tank");
//var message = document.getElementById("show_car_info");
var iv, a, s;
//functions
function loaded() {
alert("hello");
}
function start_game(e) {
a = 0;
//for (s = 5000; s == 0; s -= 5) {}
if (e.keyCode == 37 || e.keyCode == 38 || e.keyCode == 39 || e.keyCode == 40) {
s = 1000;
iv = setInterval(() => {
moving(m_tank);
}, s);
}
}
function moving(m_tank) {
a += 10;
var l_num = m_tank.offsetLeft;
var t_num = m_tank.offsetTop;
if (e.keyCode == 39) {
//alert("ArrowRight");
l_num += a;
console.log("right:" + l_num, "a_right:" + a);
} else if (e.keyCode == 37) {
//alert("ArrowLeft");
l_num -= a;
console.log("left:" + l_num, "a_left:" + a);
} else if (e.keyCode == 38) {
//alert("ArrowUp");
t_num -= a;
console.log("Up:" + t_num, "a_up:" + a);
} else if (e.keyCode == 40) {
//alert("ArrowDown");
t_num += a;
console.log("Down:" + t_num, "a_down:" + a);
}
m_tank.style.left = l_num + "px";
m_tank.style.top = t_num + "px";
}
body {
background-color: lightsteelblue;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
overflow: hidden;
}
#tank {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
background-color: brown;
}
<body onload="loaded()" onkeydown="start_game(e=event)">
<!-- <p id="show_car_info"></p> -->
<div>
<div id="tank">
<p>tank</p>
</div>
</div>
</body>

how both player move at the same time (js game)

И have a hockey game in javascript but tво players can not move at the same time. In fact, when one moves, the other remains motionless. It is normal for both players to move at the same time in this game. Do you know a function that can help me? Should a foreign function be added? Thank you for your help.
<html>
<head>
<style>
body {
margin: 0;
}
.P1 {
position: absolute;
font-size: 110px;
background-color: white;
}
.P2 {
position: absolute;
left: 1500px;
font-size: 110px;
background-color: white;
}
</style>
</head>
<body onkeydown="keyD(event)">
<span class="P1">|</span>
<span class="P2">|</span>
</body>
<script>
var P1D = 0;
var P2D = 0;
var spanP1 = document.getElementsByClassName("P1")[0];
var spanP2 = document.getElementsByClassName("P2")[0];
function keyD(e) {
if (e.keyCode == 38 || e.keyCode == 40) {
f1(e);
}
if (e.keyCode == 83 || e.keyCode == 87) {
f2(e);
}
}
function f1(e) {
if (e.keyCode == 40) {
if (P2D >= 620) {
} else {
P2D += 10;
spanP2.style.top = P2D + "px";
}
}
if (e.keyCode == 38) {
if (P2D <= -20) {
} else {
P2D -= 10;
spanP2.style.top = P2D + "px";
}
}
}
function f2(e) {
if (e.keyCode == 83) {
if (P1D >= 620) {
} else {
P1D += 10;
spanP1.style.top = P1D + "px";
}
}
if (e.keyCode == 87) {
if (P1D <= -20) {
} else {
P1D -= 10;
spanP1.style.top = P1D + "px";
}
}
}
</script>
</html>

You would need to remember which keys are pressed down or not. For example by saving their state in an object.
Furthermore, when player 1 has a key pressed and player 2 starts pressing another, the key of player 1 stops repeating for a moment. To prevent this you would need to stop relying on the key repeat of the system of the user. For example by using a setInterval or later implement it into your gameloop. Example:
// Save key states in an object
const keystates = {}
document.addEventListener('keydown', e => {
keystates[e.code] = true
})
document.addEventListener('keyup', e => {
keystates[e.code] = false
})
// Repeat the key action in your gameloop
const repeat_interval = 500
setInterval(() => {
if (keystates['KeyW']) console.log('Player1 up')
if (keystates['KeyS']) console.log('Player1 down')
if (keystates['ArrowUp']) console.log('Player2 up')
if (keystates['ArrowDown']) console.log('Player2 down')
}, repeat_interval)
EDIT:
Also don't use keyCode as it is deprecated

bouncing ball inside div

I'm trying to create a bouncing ball inside a div (it start from left to right) but then i want that when user press keyup it start bounce from top to bot (this with all arrows, also with: a, s, d, w).
Seems like my problem is when i try to clearInterval... but i don't know how to fix it...
var id=null;
myMove('dreta',id);
document.onkeyup = checkKey;
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '38' || e.keyCode == '87') {
clearInterval(id);
myMove('adalt');
}
else if (e.keyCode == '40' || e.keyCode == '65') {
clearInterval(id);
myMove('abaix');
}
else if (e.keyCode == '37' || e.keyCode == '83') {
clearInterval(id);
myMove('esquerra');
}
else if (e.keyCode == '39' || e.keyCode == '68') {
clearInterval(id);
myMove('dreta');
}
}
function myMove(moviment,id) {
var rect = ball.getBoundingClientRect();
var elem = document.getElementById("ball");
var pos = rect.left;
var pos2 = rect.top;
id = setInterval(frame, 5);
function frame() {
if(moviment=='dreta'){
if (pos == 180) {
clearInterval(id);
myMove('esquerra');
}
else{
pos++;
elem.style.left = pos + "px";
}
}
else if (moviment=='esquerra'){
if (pos == 0) {
clearInterval(id);
myMove('dreta');
}
else{
pos--;
elem.style.left = pos + "px";
}
}
else if(moviment=='adalt'){
if (pos == 0) {
clearInterval(id);
myMove('abaix');
}
else{
pos++;
elem.style.top = pos + "px";
}
}
else{
if (pos == 180) {
clearInterval(id);
myMove('adalt');
}
else{
pos--;
elem.style.top = pos + "px";
}
}
}
}
#container {
width: 200px;
height: 200px;
border: 1px solid #000;
position: relative;
}
#ball {
position: absolute;
width: 20px;
height: 20px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: red;
}
<div id="container">
<div id="ball"></div>
</div>
PD: i know that can be more easy with canvas but i would like to do it on this way.

You need only 2 functions - first func changes moving direction and calls second one, which moves a ball while checking wether a ball has reached any border.
var id=null;
var rect = ball.getBoundingClientRect();
var elem = document.getElementById("ball");
var pos_left = rect.left;
var pos_top = rect.top;
var h_dir = 0, v_dir = 0;
document.onkeyup = checkKey;
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '38' || e.keyCode == '87') {
v_dir = -1;
}
else if (e.keyCode == '40' || e.keyCode == '65') {
v_dir = 1;
}
else if (e.keyCode == '37' || e.keyCode == '83') {
h_dir = -1;
}
else if (e.keyCode == '39' || e.keyCode == '68') {
h_dir = 1;
}
clearInterval(id);
id = setInterval(frame, 5);
}
function frame() {
if (pos_left > 179 || pos_left < 1) {
h_dir *= -1;
}
if (pos_top < 1 || pos_top > 179) {
v_dir *= -1;
}
pos_left += h_dir;
elem.style.left = pos_left + "px";
pos_top += v_dir;
elem.style.top = pos_top + "px";
}
#container {
width: 200px;
height: 200px;
border: 1px solid #000;
position: relative;
}
#ball {
position: relative;
width: 20px;
height: 20px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: red;
}
<div id="container">
<div id="ball"></div>
</div>

The first mistake is setting your variable to a null value. Set it to empty, but not null. Also, you only need one argument for your function as you never actually pass an id, just the movement (which has already been determined based on the keycode).
Give below a go
var id = "";
myMove('dreta');
document.onkeyup = checkKey;
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '38' || e.keyCode == '87') {
clearInterval(id);
id = 'adalt';
} else if (e.keyCode == '40' || e.keyCode == '65') {
clearInterval(id);
id = 'abaix';
} else if (e.keyCode == '37' || e.keyCode == '83') {
clearInterval(id);
id = 'esquerra';
} else if (e.keyCode == '39' || e.keyCode == '68') {
clearInterval(id);
id = 'dreta';
}
myMove(id);
}
function myMove(moviment) {
var rect = ball.getBoundingClientRect();
var elem = document.getElementById("ball");
var pos = rect.left;
var pos2 = rect.top;
id = setInterval(frame, 5);
function frame() {
if (moviment == 'dreta') {
if (pos == 180) {
clearInterval(id);
myMove('esquerra');
} else {
pos++;
elem.style.left = pos + "px";
}
} else if (moviment == 'esquerra') {
if (pos == 0) {
clearInterval(id);
myMove('dreta');
} else {
pos--;
elem.style.left = pos + "px";
}
} else if (moviment == 'adalt') {
if (pos == 0) {
clearInterval(id);
myMove('abaix');
} else {
pos++;
elem.style.top = pos + "px";
}
} else {
if (pos == 180) {
clearInterval(id);
myMove('adalt');
} else {
pos--;
elem.style.top = pos + "px";
}
}
}
}
#container {
width: 200px;
height: 200px;
border: 1px solid #000;
position: relative;
}
#ball {
position: absolute;
width: 20px;
height: 20px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: red;
}
<div id="container">
<div id="ball"></div>
</div>

I finally solved my problem using a global variable wich detect wich direction should have the ball
function myMove() {
var rect = ball.getBoundingClientRect();
var elem = document.getElementById("ball");
var pos = rect.left;
var pos2 = rect.top;
id_interval = setInterval(frame, 5);
function frame() {
if(moviment=='dreta'){
if (pos == 180) {
clearInterval(id_interval);
moviment = 'esquerra';
myMove();
}
else{
pos++;
elem.style.left = pos + "px";
}
}
else if (moviment=='esquerra'){
if (pos == 0) {
clearInterval(id_interval);
moviment = 'dreta';
myMove();
}
else{
pos--;
elem.style.left = pos + "px";
}
}
else if(moviment=='adalt'){
if (pos2 == 0) {
clearInterval(id_interval);
moviment = 'abaix';
myMove();
}
else{
pos2--;
elem.style.top = pos2 + "px";
}
}
else{
if (pos2 == 180) {
clearInterval(id_interval);
moviment = 'adalt';
myMove();
}
else{
pos2++;
elem.style.top = pos2 + "px";
}
}
}
}
var moviment = 'esquerra';
myMove();
document.onkeyup = checkKey;
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '38' || e.keyCode == '87') {
moviment = 'adalt';
}
else if (e.keyCode == '40' || e.keyCode == '65') {
moviment = 'abaix';
}
else if (e.keyCode == '37' || e.keyCode == '83') {
moviment = 'esquerra';
}
else if (e.keyCode == '39' || e.keyCode == '68') {
moviment = 'dreta';
}
}
#container {
width: 200px;
height: 200px;
border: 1px solid #000;
position: relative;
}
#ball {
position: absolute;
width: 20px;
height: 20px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: red;
}
<div id="container">
<div id="ball"></div>
</div>