I have written a simple connect four style game using HTML, CSS, & javascript. The game is fully functional in Chrome, but I get some funny behavior when using my Firefox browser.
In Firefox, the colors of the game board successfully change when a player drops a piece, however, when I do the comparison operation when checking if a player has won, Firefox does not detect the color whatsoever.
My attempt to fix the problem was by declaring a specific rgb value, instead of just saying 'purple', I did something like below, with similar results.
Here is just the relevant pieces of my javascript code:
const _purple = "rgb(124, 0, 132)";
columns[id][5 - pcs[id]].style.background = _purple; // assignment works always
columns[id][5 - pcs[id]].style.background = 'green'; // assignment like this ok too
if (columns[_col][_row].style.background == _purple) // only works in Chrome
if (columns[_col][_row].style.background == 'green') // only works in Chrome
I also tried to use === as was suggested by a friend.
***** UPDATE ***** I checked the console to see what Firefox was returning as was suggested in the first comment, and Firefox seems to be returning the correct values.
rgb(124, 0, 132) none repeat scroll 0% 0%
green none repeat scroll 0% 0%
But the compare operation does not ever return true. I attempted to just use this entire string, but that did not work either.
As expected, on Chrome, if I just use
"rgb(124, 0, 132)" instead of _purple
it also returns true.
If it is of any help in resolving this issue the CSS element(s) that I am using in the game board is:
.box {
background: white;
border: 2px solid black;
}
Further:
visual studio reported back to me that "property color does not exist on type string". A call to console.log(first.style.background.color); returns undefined in my Firefox console, while a call to console.log(second.style.background); returns the correct rgb value. When comparing the undefined .color value it returns true, but it returns false when comparing the .background property, which is indeed the rgb value
Thank you for any help with this issue, the game and the attempts at correcting this error are viewable Here https://github.com/paolo-Rancati/four_in_a_sequence/tree/main/snippet
You can solve this using computedStyle, apparently the rgb value you have "rgb(124, 0, 132)" does not correspond to the one FireFox uses for purple.
const _purple = "rgb(128, 0, 128)";
let first = document.getElementById("first");
let second = document.getElementById("second");
const spaces = document.querySelectorAll('.box');
first.style.background = "purple";
second.style.background = _purple;
console.log(window.getComputedStyle(first).backgroundColor);
console.log(window.getComputedStyle(second).backgroundColor);
console.log(window.getComputedStyle(first).backgroundColor === window.getComputedStyle(second).backgroundColor);div {
width: 100%;
height: 50px;
border: 1px solid black;
}
.box {
background: white;
border: 2px solid black;
}<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"></html>
<head>
<link rel="stylesheet" href="static/website.css">
<meta charset="utf-8" />
<title>Game Page</title>
</head>
<div id="first"></div>
<div id="second"></div>
</html>But why are you testing the colour of a cell?? You should instead have an array storing the state of the board, and test the values in the array! I know this does not answer your question, but you have an XY problem.