Nov 20, 2022

# Solution 1 :

I see your problem, in your functions for `placeColumnFive()`, `placeColumnSix()`, and `placeColumnSeven()`, they all are comparing to column 4, when they should be comparing to column 5, 6, and 7 respectively.. All three functions have: `if(rowSixFour.hasChildNodes())` .. notice the `rowSixFour.hasChildNodes` in all three functions.. They should be `rowSixFive.hasChildNodes`, `rowSixSix.hasChildNodes`, and `rowSixSeven.hasChildNodes`.

In other words:
Change your `placeColumnFive()`, `placeColumnSix()`, and `placeColumnSeven()` functions to this:

``````function placeColumnFive(){
if(rowSixFive.hasChildNodes()){
console.log('has child');
}else{
placeOneForPlayer('rowSixFive');
}
}

function placeColumnSix(){
if(rowSixSix.hasChildNodes()){
console.log('has child');
}else{
placeOneForPlayer('rowSixSix');
}
}

function placeColumnSeven(){
if(rowSixSeven.hasChildNodes()){
console.log('has child');
}else{
placeOneForPlayer('rowSixSeven');
}
}
``````

# Problem :

My problem is that I have been testing placement for the first puck on each position.

But when I go in a row to the left the last three columns don’t place anything

Meaning they have children, even though I don’t really think they do.

### My code:

``````var redCheckBox = document.getElementById('redColor');
var yellowCheckBox = document.getElementById('yellowColor');
var easyComputerModeCheckBox = document.getElementById('easy');
var mediumComputerModeCheckBox = document.getElementById('medium');
var hardComputerModeCheckBox = document.getElementById('hard');
var goFirstCheckBox = document.getElementById('first');
var goSecondCheckBox = document.getElementById('goSecond');
var setup = document.getElementById('setup');
var gameBoard = document.getElementById('gameBoard');
var playerDot = document.getElementById('playerDot');
var circleBase = document.getElementsByClassName('circleBase');
var playerColor = '';

function createRedPlayer() {
playerDot.style.backgroundColor = 'red';
\$(circleBase).hover(function() {
\$(this).css("background-color", "red");
}, function() {
\$(this).css("background-color", "lightgreen");
});
}

function createYellowPlayer() {
playerDot.style.backgroundColor = 'yellow';
\$(circleBase).hover(function() {
\$(this).css("background-color", "yellow");
}, function() {
\$(this).css("background-color", "lightgreen");
});
}

function getGameUp() {
setup.style.display = 'none';
gameBoard.style.display = 'block';
}

function placeOneForPlayer(x /*where to put it */ ) {
var node = document.createElement("div");
var randomIdNumber = Math.floor(Math.random() * 2000);
var idName = "id" + randomIdNumber;
node.setAttribute("id", idName);
node.style.backgroundColor = playerDot.style.backgroundColor;
document.getElementById(x).appendChild(node);
}

function placeOneForEnemy(x /*where to put it */ ) {
var node = document.createElement("div");
var randomIdNumber = Math.floor(Math.random() * 2000);
var idName = "id" + randomIdNumber;
node.setAttribute("id", idName);
node.style.backgroundColor = enemyDot.style.backgroundColor;
document.getElementById(x).appendChild(node);
}

function placeColumnOne() {
if (rowSixOne.hasChildNodes()) {
console.log('has child');
} else {
placeOneForPlayer('rowSixOne');
}
}

function placeColumnTwo() {
if (rowSixTwo.hasChildNodes()) {
console.log('has child');
} else {
placeOneForPlayer('rowSixTwo');
}
}

function placeColumnThree() {
if (rowSixThree.hasChildNodes()) {
console.log('has child');
} else {
placeOneForPlayer('rowSixThree');
}
}

function placeColumnFour() {
if (rowSixFour.hasChildNodes()) {
console.log('has child');
} else {
placeOneForPlayer('rowSixFour');
}
}

function placeColumnFive() {
if (rowSixFour.hasChildNodes()) {
console.log('has child');
} else {
placeOneForPlayer('rowSixFive');
}
}

function placeColumnSix() {
if (rowSixFour.hasChildNodes()) {
console.log('has child');
} else {
placeOneForPlayer('rowSixSix');
}
}

function placeColumnSeven() {
if (rowSixFour.hasChildNodes()) {
console.log('has child');
} else {
placeOneForPlayer('rowSixSeven');
}
}``````
``````#setup {
background-color: white;
height: 90vh;
width: 80vw;
}

body {
background-color: grey;
}

#playerDot {
height: 50px;
width: 50px;
background-color: red;
display: inline-block;
visibility: hidden;
}

#enemyDot {
height: 50px;
width: 50px;
background-color: yellow;
display: inline-block;
visibility: hidden;
}

#gameBoard {
width: 75vw;
height: 60vh;
display: none;
}

#placementArea {
width: 80vw;
height: 15vh;
background-color: lightgreen;
border: 2px black solid;
display: flex;
}

#rowOne {
width: 80vw;
height: 15vh;
border: 2px black solid;
display: flex;
background-color: white;
}

#rowTwo {
width: 80vw;
height: 15vh;
border: 2px black solid;
display: flex;
background-color: white;
}

#rowThree {
width: 80vw;
height: 15vh;
border: 2px black solid;
display: flex;
background-color: white;
}

#rowFour {
width: 80vw;
height: 15vh;
border: 2px black solid;
display: flex;
background-color: white;
}

#rowFive {
width: 80vw;
height: 15vh;
border: 2px black solid;
display: flex;
background-color: white;
}

#rowSix {
width: 80vw;
height: 15vh;
border: 2px black solid;
display: flex;
background-color: white;
}

#rowOneOne {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowOneTwo {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowOneThree {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowOneFour {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowOneFive {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowOneSix {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowOneSeven {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowTwoOne {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowTwoTwo {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowTwoThree {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowTwoFour {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowTwoFive {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowTwoSix {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowTwoSeven {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowThreeOne {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowThreeTwo {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowThreeThree {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowThreeFour {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowThreeFive {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowThreeSix {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowThreeSeven {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowFourOne {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowFourTwo {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowFourThree {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowFourFour {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowFourFive {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowFourSix {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowFourSeven {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowFiveOne {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowFiveTwo {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowFiveThree {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowFiveFour {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowFiveFive {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowFiveSix {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowFiveSeven {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowSixOne {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowSixTwo {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowSixThree {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowSixFour {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowSixFive {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowSixSix {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

#rowSixSeven {
width: 11.42vw;
height: 15vh;
border: 2px black solid;
}

.circleBase {
behavior: url(PIE.htc);
border: 2px black solid;
}

.type1 {
width: 11.42vw;
height: 14.5vh;
background-color: lightgreen;
}``````
``````<center>
<div id='setup'>
Hey! Welcome to my Connect Four game! Please choose some settings below!
<br>
<h3>Player:</h3>
Do you want to be Red?
<input type='checkbox' id='redColor' value='red' onclick='createRedPlayer()'>
&nbsp; &nbsp; Or do you want to be Yellow?
<input type='checkbox' id='yellowColor' value='yellow' onchange='createYellowPlayer()'>
<h3>Opponent AI Level:</h3>
Easy
<input type='checkbox' id='easy' value='easyMode' onclick='compEasyModeSetup()'>
&nbsp; &nbsp; Medium (Coming Soon)
<input type='checkbox' id='medium' value='mediumMode' onclick='compMediumModeSetup()'>
&nbsp; &nbsp; Hard (Coming Soon)
<input type='checkbox' id='hard' value='hardMode' onclick='compHardModeSetup()'>
<br>
<h4>Do you want to go first, or have the computer go first?</h4>
First
<input type='checkbox' id='goFirst' value='first' onclick='orderFunctionFirst()'>
&nbsp; &nbsp Second
<input type='checkbox' id='goSecond' value='second' onclick='orderFunctionSecond()'>
<br>
<br>
<br>
<button id='confirm' onclick='getGameUp()'>Confirm</button>
</div>
</center>

<span id='playerDot'></span>
<span id='enemyDot'></span>

<center>
<div id='gameBoard'>
<div id='placementArea'>
<div class="circleBase type1" id='firstPlacement' onclick='placeColumnOne()' ;></div>
<div class="circleBase type1" id='secondPlacement' onclick='placeColumnTwo()'></div>
<div class="circleBase type1" id='thirdPlacement' onclick='placeColumnThree()'></div>
<div class="circleBase type1" id='fourthPlacement' onclick='placeColumnFour()'></div>
<div class="circleBase type1" id='fifthPlacement' onclick='placeColumnFive()'></div>
<div class="circleBase type1" id='sixthPlacement' onclick='placeColumnSix()'></div>
<div class="circleBase type1" id='seventhPlacement' onclick='placeColumnSeven()'></div>
</div>
<div id='rowOne'>
<div id='rowOneOne'></div>
<div id='rowOneTwo'></div>
<div id='rowOneThree'></div>
<div id='rowOneFour'></div>
<div id='rowOneFive'> </div>
<div id='rowOneSix'></div>
<div id='rowOneSeven'></div>
</div>
<div id='rowTwo'>
<div id='rowTwoOne'></div>
<div id='rowTwoTwo'></div>
<div id='rowTwoThree'></div>
<div id='rowTwoFour'></div>
<div id='rowTwoFive'></div>
<div id='rowTwoSix'></div>
<div id='rowTwoSeven'></div>
</div>
<div id='rowThree'>
<div id='rowThreeOne'></div>
<div id='rowThreeTwo'></div>
<div id='rowThreeThree'></div>
<div id='rowThreeFour'></div>
<div id='rowThreeFive'></div>
<div id='rowThreeSix'></div>
<div id='rowThreeSeven'></div>
</div>
<div id='rowFour'>
<div id='rowFourOne'></div>
<div id='rowFourTwo'></div>
<div id='rowFourThree'></div>
<div id='rowFourFour'></div>
<div id='rowFourFive'></div>
<div id='rowFourSix'></div>
<div id='rowFourSeven'></div>
</div>
<div id='rowFive'>
<div id='rowFiveOne'></div>
<div id='rowFiveTwo'></div>
<div id='rowFiveThree'></div>
<div id='rowFiveFour'></div>
<div id='rowFiveFive'></div>
<div id='rowFiveSix'></div>
<div id='rowFiveSeven'></div>
</div>
<div id='rowSix'>
<div id='rowSixOne'></div>
<div id='rowSixTwo'></div>
<div id='rowSixThree'></div>
<div id='rowSixFour'></div>
<div id='rowSixFive'></div>
<div id='rowSixSix'></div>
<div id='rowSixSeven'></div>
</div>
</div>
</center>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>``````

### Comment posted by Bryan Elliott

You’re welcome! Happy to help. I know.. it’s the simple mistakes that oftentimes are the hardest to notice, and sometimes just needs another set of eyes. Happens all the time. ðŸ™‚ Good luck and happy coding! ðŸ™‚