How can I toggle my player variable to switch between player one and player two?

Question

I'm making a connect four game and right now I'm able to click on the game board; run some logic to determine which slot is open, and then place the current player in that slot. Now I want to switch to the other player. I attempted to do this with a switchPlayer(player); function which looked like this

function switchPlayer(player) {
    if (player === 'p1') 
        player = 'p2';
    else if (player ==='p2') 
        player = 'p1';
}

This didn't do anything because I had player set as a global, so it stays at player = 'p1';

Any ideas?

 //grab all slot positions on the board const slots = document.querySelectorAll('.board div'); const player = 'p1'; const board = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, ] //assign a class to each slot to represent its position for(let i = 0; i < slots.length; i++) { slots[i].classList.add('c' + i); //add the function with the game logic to each slot slots[i].addEventListener('click', runGame); } function runGame() { //figure out which column the selected slot sits in const slotColumn = (Number(this.className.slice(1, 3)) % 7); //create an array to store all the slots that share the above column const columnArray = []; //grab all the slots that sit in that column for(let i = 0; i < board.length; i++) { if(board[i] % 7 === slotColumn) columnArray.push(board[i]); } //drop chip in the chosen column dropChip(columnArray); function dropChip(column) { //select bottom most slot that's available in the column for(let i = column.length - 1; i > 0; i--) { if(column[i] !== 'p1' || column[i] !== 'p2') { board[column[i]] = player; slots[column[i]].classList.add(player); switchPlayer(player); break; } } function switchPlayer(player) { if(player === 'p1') player = 'p2'; else if(player ==='p2') player = 'p1'; } console.log(board); } } 

 /** { outline: 1px solid red; }*/ *, *:before, *:after { box-sizing: inherit; } html { box-sizing: border-box; } html, body { margin: 0; padding: 0; background-color: #e5e6e8; } body { display: flex; justify-content: center; min-height: 100vh; } .board-wrapper { padding-top: 100px; display: flex; justify-content: center; margin: auto auto 0 auto; /*ask why this is needed*/ position: relative; } .board { display: flex; flex-wrap: wrap; max-width: 706px; background-color: #00c; padding: 3px; } .board div { width: 100px; height: 100px; background-color: blue; border: 3px solid #00c; position: relative; } .board div:after { content: ""; display: inline-block; width: 80px; height: 80px; border-radius: 50%; background-color: #00c; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; box-shadow: inset 0px 0px 13px #0606aa; } .board .chip { display: block; position: absolute; background-color: transparent; top: 0; left: 0; right: 0; height: 100px; } .board .chip:after { content: ""; width: 80px; height: 80px; border-radius: 50%; background-color: red; position: absolute; left: 3px; top: 0; opacity: 0; transition: all .5s ease; } .board .chip:before { content: ""; width: 50px; height: 50px; border-radius: 50%; background-color: red; position: absolute; left: 18px; top: 15px; z-index: 1; box-shadow: inset 0px 0px 20px #cc0000; opacity: 0; transition: all .5s ease; } .board div:nth-of-type(7n+1):hover ~ .chip:after{transform: translateX(10px); opacity: 1;} .board div:nth-of-type(7n+1):hover ~ .chip:before{transform: translateX(10px); opacity: 1;} .board div:nth-of-type(7n+2):hover ~ .chip:after{transform: translateX(110px); opacity: 1;} .board div:nth-of-type(7n+2):hover ~ .chip:before{transform: translateX(110px); opacity: 1;} .board div:nth-of-type(7n+3):hover ~ .chip:after{transform: translateX(210px); opacity: 1;} .board div:nth-of-type(7n+3):hover ~ .chip:before{transform: translateX(210px); opacity: 1;} .board div:nth-of-type(7n+4):hover ~ .chip:after{transform: translateX(310px); opacity: 1;} .board div:nth-of-type(7n+4):hover ~ .chip:before{transform: translateX(310px); opacity: 1;} .board div:nth-of-type(7n+5):hover ~ .chip:after{transform: translateX(410px); opacity: 1;} .board div:nth-of-type(7n+5):hover ~ .chip:before{transform: translateX(410px); opacity: 1;} .board div:nth-of-type(7n+6):hover ~ .chip:after{transform: translateX(510px); opacity: 1;} .board div:nth-of-type(7n+6):hover ~ .chip:before{transform: translateX(510px); opacity: 1;} .board div:nth-of-type(7n+7):hover ~ .chip:after{transform: translateX(610px); opacity: 1;} .board div:nth-of-type(7n+7):hover ~ .chip:before{transform: translateX(610px); opacity: 1;} 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Connect Four</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="board-wrapper"> <div class="board"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <span class="chip"></span> </div> </div> <script src="script.js"></script> </body> </html> 

Answer 1

You have declared player as const , therefore you cannot change the value of it, use let or var .

Change your code to be

var player = "p1";

Answer 2

You have two problems:

1. Your global is a const , thus you can't change what it points to. Change the variable deceleration to a let .

...
let player = 'p1';
...

2. Your function is shadowing the global name, as such you need to make sure the names don't collide or it will only update the one closest in scope.

function switchPlayer(currentPlayer) {
  if (currentPlayer === 'p1) {
    player = 'p2';
  } else {
    player = 'p1';
  }
}

Doing these two changes should solve that problem at least.

---

Notes

Shadowing a variable

let a = 1;

function test (a) {
  a = 2; // sets the argument, NOT the same named global
}

test(a);
a; // 1

Other things to look into

• Where you declare your functions
  • Do they need to be declared there, or can they be declared somewhere else?
• How else can you represent the board?
  • Is there a way you can represent the board so that you don't always have to construct an array of things every time?

Games is a great way to build a fun, interactive way of representing JS state related to an HTML DOM! You should try making MineSweeper next!