文章/答案/技术大牛

发布

社区首页 >问答首页 >Javascript交替播放转身和改变颜色

问Javascript交替播放转身和改变颜色
EN

Stack Overflow用户

提问于 2020-03-04 21:56:14

回答 1查看 126关注 0票数 0

我正在尝试创建connect4，我正在尝试弄清楚如何在改变颜色的同时在用户轮换之间切换。例如，第一个玩家是橙色的，而第二个玩家是红色的。我有下面的代码，它看起来很好(但我知道什么呢？我是新的哈哈)

我做了很多谷歌搜索，但我真的看不出我写的代码有什么问题。如果有人能提供一些指导，那就太好了。

希望你们都有美好的一天！！:)

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;
        }
    }
}

javascript

html

colors

dom-events

Stack Overflow用户

发布于 2020-03-04 22:12:20

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>

请将下面的行从display_input()更改为...

var obj = document.getElementsByClassName('cell')

而不是。

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

因为如果你写[0]，这意味着它只会给你一个元素，所以，for loop只会迭代一次。

票数 0

查看全部 1 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60527719

复制

相似问题

问Javascript交替播放转身和改变颜色
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript交替播放转身和改变颜色EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript交替播放转身和改变颜色
EN