Changing colors of numbers in boxes

[irishjack490]

What's the problem you're trying to solve?

I am trying to make the numbers in the Minesweeper game to display in different colors, i.e. I'd like 1 to be green, 2 to be blue, 3 magenta... I am trying to research online but can't seem to find what I am looking for. My code below, the map method displays the numbers. Any direction is greatly appreciated

Post any code you think might be relevant (one fenced block per file)

function countAdjacentMines(boxId){
   let count = 0;
   const [row, col] = boxId.split("-").map(Number);

   for(let i = row -1; i <= row +1; i++){
    for (let j = col -1; j <= col +1; j++){
      if(i>= 1 && i < rows && j>= 1 && j < columns){
        let neighborId = i.toString() + "-" + j.toString();
            if(minesLocation.includes(neighborId)){
          count++;

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

I tried this to test: let neighborId = document.getElementById("neighborId").style.color = "green"; the error I received was: Uncaught TypeError: Cannot read properties of null (reading 'style') at countAdjacentMines (main.js:74:58) at HTMLDivElement.boxClicked

What is your best guess as to the source of the problem?

I am thinking there is a way to modify what comes out of .map() but I couldn't find anything online

What things have you already tried to solve the problem?

I have tried the code the getElementById

Paste a link to your repository here

https://github.com/irishjack490/Project-1---Browser-Based-Game

[timmshinbone]

What is neighbordId and where is it coming from? I think it's not finding any elements with that ID, so you might need to try to grab them in a different way

[irishjack490]

Thanks for response. I set up neighborId on that piece of code to create coordinates of those boxes that don't have a mine and should have a number but now that I think about it, that does not make much sense lol. I will try to grab the numbers from map in a different way 👍

[timmshinbone]

update us here when you've got that goin

[irishjack490]

I talked to a class mate in the break room, it was suggested to use span, I started a span html element from JS file, and created an array with the colors I wanted. the code works, only thing is, every time I click on a box, the number displays in the box with black font and right at the bottom of the board it displays again on the color I wanted lol. How can I move the span inside the box.. here is the code, I have, I attached a screenshot at the bottom (Thanks in advance!):

/added array with colors I want const numberColors = ["red", "blue", "green", "magenta", "orange", "purple"] function countAdjacentMines(boxId){

let count = 0; const [row, col] = boxId.split("-").map(Number);

for(let i = row -1; i <= row +1; i++){ for (let j = col -1; j <= col +1; j++){ if(i >= 0 && i < rows && j >= 0 && j < columns){ let neighborId = i.toString() + "-" + j.toString(); if(minesLocation.includes(neighborId)){ count++; } } } } const numberElement = document.createElement("span"); numberElement.className = "mine-number"; numberElement.textContent = count;

const colorIndex = count % numberColors.length; numberElement.style.color = numberColors[colorIndex]; document.getElementById("board").appendChild(numberElement);

return count; }

[timmshinbone]

Looking good so far! We'll look together after lunch, you're third in line for me when we get back. I'll slack ya

[irishjack490]

Issue has been resolved with this code

function boxClicked() {
  if(gameOver) {
    return;
  }

let currentBox = this;
  let boxId = currentBox.id; 
 if (minesLocation.includes(boxId)) {
    gameOver = true;
    revealMines();
    return;
  }else {
    let count = countAdjacentMines (boxId);
    currentBox.innerText = count; 
    currentBox.style.color = numberColors[count];

  }

}

const numberColors = {
  0: "red",
  1: "blue",
  2: "green",
  3: "magenta",
  4: "orange",
  5: "purple"

Thank you so much for your help and meeting with me