Bollate

HTML

[ANSWERED] html – Javascript alternate player turns and changing colours

By

Nov 20, 2022 , , ,

Solution 1 : 

function orangeFunction (){
    this.style.backgroundColor = 'orange'
}

function redFunction (){
    this.style.backgroundColor = 'red'
}


function display_input(){
    var obj = document.getElementsByClassName('cell');
    var playerOne = 1;
    for (let i=0;i<obj.length;i++){
        if(playerOne==1){
            obj[i].addEventListener('click',orangeFunction);
            playerOne=0;
        }else{
            obj[i].addEventListener('click',redFunction);
            playerOne=1;
        }
    }
}

display_input();
<!DOCTYPE html>
<html>
<head>
	<title>Stack</title>
</head>
<body>

<body>
<div class='grid'>
    <div class='row1'>
        <div class='cell' id='cell1' data-cell-index='1'>gdfdgdgdgdgdg</div>
        <div class='cell' id='cell2' data-cell-index='2'>jjjhjkh</div>
        <div class='cell' id='cell3' data-cell-index='3'>mmhhhjm</div>
        <div class='cell' id='cell4' data-cell-index='4'>mhmhhhh</div>
        <div class='cell' id='cell5' data-cell-index='5'>kjhjkhkjhk</div>
        <div class='cell' id='cell6' data-cell-index='6'>klihjkhkjh</div>
        <div class='cell' id='cell7' data-cell-index='7'>hkjhjkhjkh</div>
    </div>
    <div class='row2'>
        <div class='cell' id='cell8' data-cell-index='8'>kjhjkhkjhk</div>
        <div class='cell' id='cell9' data-cell-index='9'>kjhjkhkjhk</div>
        <div class='cell' id='cell10' data-cell-index='10'>kjhjkhkjhk</div>
        <div class='cell' id='cell11' data-cell-index='11'>kjhjkhkjhk</div>
        <div class='cell' id='cell12' data-cell-index='12'>kjhjkhkjhk</div>
        <div class='cell' id='cell13' data-cell-index='13'>kjhjkhkjhk</div>
        <div class='cell' id='cell14' data-cell-index='14'>kjhjkhkjhk</div>
    </div>
    <div class='row3'>
        <div class='cell' id='cell15' data-cell-index='15'>kjhjkhkjhk</div>
        <div class='cell' id='cell16' data-cell-index='16'>kjhjkhkjhk</div>
        <div class='cell' id='cell17' data-cell-index='17'>kjhjkhkjhk</div>
        <div class='cell' id='cell18' data-cell-index='18'>kjhjkhkjhk</div>
        <div class='cell' id='cell19' data-cell-index='19'>kjhjkhkjhk</div>
        <div class='cell' id='cell20' data-cell-index='20'>kjhjkhkjhk</div>
        <div class='cell' id='cell21' data-cell-index='21'>kjhjkhkjhk</div>
    </div>
    <div class='row4'>
        <div class='cell' id='cell22' data-cell-index='22'>kjhjkhkjhk</div>
        <div class='cell' id='cell23' data-cell-index='23'>kjhjkhkjhk</div>
        <div class='cell' id='cell24' data-cell-index='24'>kjhjkhkjhk</div>
        <div class='cell' id='cell25' data-cell-index='25'>kjhjkhkjhk</div>
        <div class='cell' id='cell26' data-cell-index='26'>kjhjkhkjhk</div>
        <div class='cell' id='cell27' data-cell-index='27'>kjhjkhkjhk</div>
        <div class='cell' id='cell28' data-cell-index='28'>kjhjkhkjhk</div>
    </div>
</div>

</body>
</html>

Please change your below line from display_input() to…

var obj = document.getElementsByClassName('cell')

instead of…

var obj = document.getElementsByClassName('cell')[0]

Because if you write [0] it means it will give you only one element so, for loop will iterate only once.

Problem :

I am trying to create connect4 and I am trying to figure out how to alternate between user turns while changing the colors. For example, the first player would be orange while the second player would be red. I have my code below which to me looks good (But what do I know? I’m new haha)

I’ve done a lot of googling but can’t really see what is wrong with the code I wrote. If anyone could provide some guidance that would be lovely.

I hope you all have a wonderful day!! 🙂

HTML

<body>
<div class='grid'>
    <div class='row1'>
        <div class='cell' id='cell1' data-cell-index='1'></div>
        <div class='cell' id='cell2' data-cell-index='2'></div>
        <div class='cell' id='cell3' data-cell-index='3'></div>
        <div class='cell' id='cell4' data-cell-index='4'></div>
        <div class='cell' id='cell5' data-cell-index='5'></div>
        <div class='cell' id='cell6' data-cell-index='6'></div>
        <div class='cell' id='cell7' data-cell-index='7'></div>
    </div>
    <div class='row2'>
        <div class='cell' id='cell8' data-cell-index='8'></div>
        <div class='cell' id='cell9' data-cell-index='9'></div>
        <div class='cell' id='cell10' data-cell-index='10'></div>
        <div class='cell' id='cell11' data-cell-index='11'></div>
        <div class='cell' id='cell12' data-cell-index='12'></div>
        <div class='cell' id='cell13' data-cell-index='13'></div>
        <div class='cell' id='cell14' data-cell-index='14'></div>
    </div>
    <div class='row3'>
        <div class='cell' id='cell15' data-cell-index='15'></div>
        <div class='cell' id='cell16' data-cell-index='16'></div>
        <div class='cell' id='cell17' data-cell-index='17'></div>
        <div class='cell' id='cell18' data-cell-index='18'></div>
        <div class='cell' id='cell19' data-cell-index='19'></div>
        <div class='cell' id='cell20' data-cell-index='20'></div>
        <div class='cell' id='cell21' data-cell-index='21'></div>
    </div>
    <div class='row4'>
        <div class='cell' id='cell22' data-cell-index='22'></div>
        <div class='cell' id='cell23' data-cell-index='23'></div>
        <div class='cell' id='cell24' data-cell-index='24'></div>
        <div class='cell' id='cell25' data-cell-index='25'></div>
        <div class='cell' id='cell26' data-cell-index='26'></div>
        <div class='cell' id='cell27' data-cell-index='27'></div>
        <div class='cell' id='cell28' data-cell-index='28'></div>
    </div>
    <div class='row5'>
        <div class='cell' id='cell29' data-cell-index='29'></div>
        <div class='cell' id='cell30' data-cell-index='30'></div>
        <div class='cell' id='cell31' data-cell-index='31'></div>
        <div class='cell' id='cell32' data-cell-index='32'></div>
        <div class='cell' id='cell33' data-cell-index='33'></div>
        <div class='cell' id='cell34' data-cell-index='34'></div>
        <div class='cell' id='cell35' data-cell-index='35'></div>
    </div>
    <div class='row6'>
        <div class='cell' id='cell36' data-cell-index='36'></div>
        <div class='cell' id='cell37' data-cell-index='37'></div>
        <div class='cell' id='cell38' data-cell-index='38'></div>
        <div class='cell' id='cell39' data-cell-index='39'></div>
        <div class='cell' id='cell40' data-cell-index='40'></div>
        <div class='cell' id='cell41' data-cell-index='41'></div>
        <div class='cell' id='cell42' data-cell-index='42'></div>
    </div>
</div>

JavaScript

function orangeFunction (){
    this.style.backgroundColor = 'orange'
}

function redFunction (){
    this.style.backgroundColor = 'red'
}


function display_input(){
    var obj = document.getElementsByClassName('cell')[0];
    var playerOne = 1;
    for (let i=0;i<obj.length;i++){
        if(playerOne==1){
            obj[i].addEventListener('click',orangeFunction);
            playerOne=0;
        }else{
            obj[i].addEventListener('click',redFunction);
            playerOne=1;
        }
    }
}

Comments

Comment posted by Azametzin

Remove

Comment posted by JustinLL99

@Azametzin I tried your solution but I seem to only have the orange color appear. Do you know what I can do so that red can appear?

Comment posted by MK Patel

In both function

Comment posted by JustinLL99

I did that and then I got a new error that says “Uncaught SyntaxError: Unexpected token ‘this’ “

Comment posted by MK Patel

I am not sure about this but please try to write

Comment posted by JustinLL99

I still get the same error

Comment posted by MK Patel

From your code, I just removed

By

Related Post

HTML

[ANSWERED] python – Extract text from a class in HTML using CSS language

Nov 20, 2022
HTML

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

Nov 20, 2022
HTML

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022