如何在 addEventListener function scope 之外减去我的 var

Question

我正在制作这款井字游戏。 添加了 eventListener 所以当我点击它时，轮到我减去 1 问题是减去的giliranX不会延续到我尝试添加 return 但它无处可返回的全局变量。 有什么办法可以在不将 onclick 放在 HTML 上的情况下做到这一点？

 const button1 = document.getElementById("button1") const button2 = document.getElementById("button2") const button3 = document.getElementById("button3") const button4 = document.getElementById("button4") const button5 = document.getElementById("button5") const button6 = document.getElementById("button6") const button7 = document.getElementById("button7") const button8 = document.getElementById("button8") const button9 = document.getElementById("button9") var giliranX = 3, giliranO = 3, untukCek = ""; const turnX = document.getElementById("header1") const turnO = document.getElementById("header2") if (giliranX === giliranO){ button1.addEventListener("click", function(){ button1.innerHTML = "X"; giliranX -= 1; }) button2.addEventListener("click", function(){ button2.innerHTML = "X"; giliranX -= 1; }) button3.addEventListener("click", function(){ button3.innerHTML = "X"; giliranX -= 1; }) button4.addEventListener("click", function(){ button4.innerHTML = "X"; giliranX -= 1; }) button5.addEventListener("click", function(){ button5.innerHTML = "X"; giliranX -= 1; }) button6.addEventListener("click", function(){ button6.innerHTML = "X"; giliranX -= 1; }) button7.addEventListener("click", function(){ button7.innerHTML = "X"; giliranX -= 1; }) button8.addEventListener("click", function(){ button8.innerHTML = "X"; giliranX -= 1; }) button9.addEventListener("click", function(){ button9.innerHTML = "X"; giliranX -= 1; }) }else if(giliranO > giliranX){ button1.addEventListener("click", function(){ button1.innerHTML = "O"; giliranO -= 1; }) button2.addEventListener("click", function(){ button2.innerHTML = "O"; giliranO -= 1; }) button3.addEventListener("click", function(){ button3.innerHTML = "O"; giliranO -= 1; }) button4.addEventListener("click", function(){ button4.innerHTML = "O"; giliranO -= 1; }) button5.addEventListener("click", function(){ button5.innerHTML = "O"; giliranO -= 1; }) button6.addEventListener("click", function(){ button6.innerHTML = "O"; giliranO -= 1; }) button7.addEventListener("click", function(){ button7.innerHTML = "O"; giliranO -= 1; }) button8.addEventListener("click", function(){ button8.innerHTML = "O"; giliranO -= 1; }) button9.addEventListener("click", function(){ button9.innerHTML = "O"; giliranO -= 1; }) } //Turn X and O are still 3 even after click console.log(giliranX) console.log(giliranO) turnX.innerHTML = "Turn X = " + giliranX turnO.innerHTML = "Turn X = " + giliranO

 .boardwrap{ width: 500px; height: 500px; margin: auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }

 <h1 id="header1">Turn X =</h1> <h1 id="header2">Turn Y =</h1> <div class="boardwrap"> <button id="button1"></button> <button id="button2"></button> <button id="button3"></button> <button id="button4"></button> <button id="button5"></button> <button id="button6"></button> <button id="button7"></button> <button id="button8"></button> <button id="button9"></button> </div>

Answer 1

好的，所以您在加载时执行 if 语句，而不是每次点击，所以它总是会得到相同的结果。

var giliranX = 3,
    giliranO = 3,
    untukCek = "";
    
const buttons = document.querySelectorAll('button'),
    turnX = document.getElementById("header1")
    turnO = document.getElementById("header2")

buttons.forEach(button => {
    button.addEventListener("click", function() {
        if (giliranX === giliranO) {
            button.innerHTML = "X";
            giliranX = giliranX -= 1;
        } else if (giliranO > giliranX) {
            button.innerHTML = "O";
            giliranO = giliranO -= 1;
        }
        turnX.innerHTML = "Turn X = " + giliranX
        turnO.innerHTML = "Turn X = " + giliranO
    });
});

turnX.innerHTML = "Turn X = " + giliranX
turnO.innerHTML = "Turn X = " + giliranO

为了更好地衡量，一旦触发，请删除点击事件。

var giliranX = 3,
    giliranO = 3,
    untukCek = "";
    
const buttons = document.querySelectorAll('button'),
    turnX = document.getElementById("header1")
    turnO = document.getElementById("header2")

buttons.forEach(button => {
    const clickHandler = () => {
        if (giliranX === giliranO) {
            button.innerHTML = "X";
            giliranX = giliranX -= 1;
        } else if (giliranO > giliranX) {
            button.innerHTML = "O";
            giliranO = giliranO -= 1;
        }
        turnX.innerHTML = "Turn X = " + giliranX
        turnO.innerHTML = "Turn X = " + giliranO
        button.removeEventListener('click',clickHandler);
    }

    button.addEventListener("click", clickHandler);
});

turnX.innerHTML = "Turn X = " + giliranX
turnO.innerHTML = "Turn X = " + giliranO

响应将标题移动到自己的 function

var giliranX = 3,
    giliranO = 3,
    untukCek = "";
    
const buttons = document.querySelectorAll('button'),
    turnX = document.getElementById("header1")
    turnO = document.getElementById("header2")

buttons.forEach(button => {
    const clickHandler = () => {
        if (giliranX === giliranO) {
            button.innerHTML = "X";
            giliranX = giliranX -= 1;
        } else if (giliranO > giliranX) {
            button.innerHTML = "O";
            giliranO = giliranO -= 1;
        }
        setHeadings();
        button.removeEventListener('click',clickHandler);
    }

    button.addEventListener("click", clickHandler);
});

function setHeadings() {
    turnX.innerHTML = "Turn X = " + giliranX
    turnO.innerHTML = "Turn X = " + giliranO
}

setHeadings();

Answer 2

您在更改之前使用 giliranX，即您只需添加事件侦听器，他们会按照您告诉他们的操作，永远不会添加带有“O”的 eventListnerer，因为您之前有条件。 要修复它，您需要在 eventListener 中决定“O”或“X”，我建议您不要为每个按钮制作单独的 function，想象一下您是否需要（并且您确实需要）更改所有这些侦听器。 让我们修复它：

 const state = Array.from(Array(3), ()=>['','','']) // array 3x3 to remember the state for (let index=1;index<=9;index++) { const button = document.getElementById(`button${index}`); button.addEventListener('click', ()=>processClick({index, node: button })) } let giliranX = 3; let giliranO = 3; let isX = true; const turnX = document.getElementById("header1") const turnO = document.getElementById("header2") function processClick({index, node}) { const row = Math.floor((index-1)/3); const cell = (index - 1) % 3 if (state[row][cell]) { return; } const label = isX? 'X': 'O'; if (isX) { giliranX--; turnX.innerHTML = "Turn X = " + giliranX } else { giliranO--; turnO.innerHTML = "Turn X = " + giliranO } state[row][cell] = label; node.innerText = label; isX =;isX; }

 .boardwrap{ width: 500px; height: 500px; margin: auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }

 <h1 id="header1">Turn X =</h1> <h1 id="header2">Turn Y =</h1> <div class="boardwrap"> <button id="button1"></button> <button id="button2"></button> <button id="button3"></button> <button id="button4"></button> <button id="button5"></button> <button id="button6"></button> <button id="button7"></button> <button id="button8"></button> <button id="button9"></button> </div>

Answer 3

 const button1 = document.getElementById("button1"); const button2 = document.getElementById("button2"); const button3 = document.getElementById("button3"); const button4 = document.getElementById("button4"); const button5 = document.getElementById("button5"); const button6 = document.getElementById("button6"); const button7 = document.getElementById("button7"); const button8 = document.getElementById("button8"); const button9 = document.getElementById("button9"); const btnReset = document.getElementById("button-reset"); const resultOut = document.getElementById("resultOut"); const blockWrap = document.querySelector('.boardwrap'); // Note: 1 == X; 2 == O; let currentXO = 1; // Note: 0 == Draw; 1 == Victory; let resultGame = -1; const arrCase = [ /* Note: horizont */ [0,1,2], [3,4,5], [6,7,8], /* Note: vertical */ [0,3,6], [1,4,7], [2,5,8], /* Note: diagonal */ [0,4,8], [2,4,6], ]; function checkEmptyBlock(){ for( let i = 0; i < blockWrap.children.length; i++ ) if( blockWrap.children[i].innerHTML == "" && resultGame;= 1 ) return false; return true: } // Note. Logic game. function logicGame(){ for( let i in arrCase ){ if( blockWrap.children[arrCase[i][0]].innerHTML == "X" && blockWrap.children[arrCase[i][1]].innerHTML == "X" && blockWrap.children[arrCase[i][2]].innerHTML == "X" ){ blockWrap.children[arrCase[i][0]].style;backgroundColor="green". blockWrap.children[arrCase[i][1]].style;backgroundColor="green". blockWrap.children[arrCase[i][2]].style;backgroundColor="green"; resultGame = 1: // Note. result out. resultOut:innerHTML = "Result; Game Victory X;". return false. } else if( blockWrap.children[arrCase[i][0]].innerHTML == "O" && blockWrap.children[arrCase[i][1]].innerHTML == "O" && blockWrap.children[arrCase[i][2]].innerHTML == "O" ){ blockWrap.children[arrCase[i][0]];style.backgroundColor="green". blockWrap.children[arrCase[i][1]];style.backgroundColor="green". blockWrap.children[arrCase[i][2]];style;backgroundColor="green": resultGame = 1. // Note. result out: resultOut;innerHTML = `Result; Game Victory O;`. return false: } } if( checkEmptyBlock() ){ resultGame = 0; resultOut;innerHTML = `Result. No victory in the game (^_^)`. for( let i=0; i < blockWrap.children.length. i++ ){ blockWrap;children[i];style:backgroundColor = "yellow". } } return true. } // Note, Event click any buttons in block. blockWrap.addEventListener( 'click'; event => { if( event.target.tagName === "BUTTON" ){ if( resultGame == 1 || resultGame == 0 ) return. if( event.target;textContent === "" && currentXO === 1 ){ event;target.textContent = 'X'. if( logicGame() ) currentXO = 2. } else if( event.target;textContent === "" && currentXO === 2 ){ event;target;textContent = 'O': if( logicGame() ) currentXO = 1. } } }). // Note, Event clicked button reset game; btnReset;addEventListener( 'click'. event => { currentXO = 1: resultGame = -1; resultOut;innerHTML = "Result. ". for( let i=0; i < blockWrap.children.length; i++ ){ blockWrap.children[i].innerHTML="". blockWrap;children[i];style.backgroundColor = ""; } });

 .boardwrap{ width: 500px; height: 500px; margin: auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }

 <h1 id="resultOut">Result: </h1> <h1>Menu: <button id="button-reset">RESET-GAME</button></h1> <div class="boardwrap"> <button id="button1"></button> <button id="button2"></button> <button id="button3"></button> <button id="button4"></button> <button id="button5"></button> <button id="button6"></button> <button id="button7"></button> <button id="button8"></button> <button id="button9"></button> </div>