堆栈内存溢出
  简体   繁体   English

为什么我的事件在单击后停止发生？

[英]Why does my event stop occuring after only one click?

 原文  2022-05-24 11:43:20  8   1    javascript

问题描述

I'm trying to make a tic tac toe game.我正在尝试制作井字游戏。 The part where the computer choice is generated only occurs after one click, after that, no computer choice is generated.生成计算机选项的部分只有在单击后才会出现，之后不再生成计算机选项。

For example, in the first picture, when I make the first move of placing an X in any of these boxes, a random O is displayed in another box which is what I intended.例如，在第一张图片中，当我第一步将 X 放在这些框中的任何一个中时，随机 O 会显示在另一个框中，这正是我想要的。

But when I make the second move of placing an X on the middle box as shown in the second picture.但是当我第二步在中间的盒子上放一个 X 时，如第二张图片所示。 No random O pops up in another box.没有随机 O 在另一个框中弹出。 The next moves I make also do not display a random O in other boxes.我接下来的动作也不会在其他框中显示随机 O。

例如，当我第一次在这些框中放置一个 X 时，随机的 O 会显示在另一个框中，这正是我想要的。

但是当我第二步在中间的盒子上放一个 X 时，如图所示。没有随机 O 在另一个框中弹出。我接下来的动作也不会在其他框中显示随机 O。 

 @import url('https://fonts.googleapis.com/css2?family=Koulen&family=VT323&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lobster&family=Signika+Negative:wght@400;500;600&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } html, body { text-align: center; background-color: #1C2C54; color: #D175B7; font-family: 'Signika Negative', sans-serif; } main { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 20px; margin: auto; position: absolute; top: 50%; bottom: 50%; left: 50%; right: 50%; } h1 { font-family: 'VT323', monospace; font-size: 3rem; } .text-container { display: flex; flex-direction: column; width: 300px; } .grid-container { display: grid; grid-template-columns: auto auto auto; background-color: #4BC3B5; padding: 20px; } .grid-item { background-color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.8); padding: 30px; font-size: 30px; text-align: center; cursor: pointer; } .button-container { display: flex; flex-direction: row; gap: 10px; } button { padding: 3px 20px; background-color: #4BC3B5; color: white; border: 3px solid #34a396; border-radius: 5px; cursor: pointer; } button:hover { background-color: #2c8d82; border: 3px solid #124640; } button:focus { background-color: #2c8d82; border: 3px solid #124640; } .score-container { display: flex; flex-direction: column; gap: 10px; width: 300px; justify-content: center; color: white; } @media only screen and (min-device-width: 768px) and (max-device-width: 1190px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) { button { font-size: 1.5rem; padding: 10px 25px; } .grid-container { padding: 40px; } .grid-item { padding: 40px; font-size: 2rem; } } @media (min-width:1281px) { button { font-size: 2rem; padding: 10px 25px; } .grid-container { padding: 40px; } .grid-item { padding: 40px; font-size: 2rem; } }
 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tic Tac Toe</title> </head> <body> <main> <div class="text-container"> <h1>Tic Tac Toe</h1> </div> <div class="grid-container"> <div class="grid-item" id="grid1"></div> <div class="grid-item" id="grid2"></div> <div class="grid-item" id="grid3"></div> <div class="grid-item" id="grid4"></div> <div class="grid-item" id="grid5"></div> <div class="grid-item" id="grid6"></div> <div class="grid-item" id="grid7"></div> <div class="grid-item" id="grid8"></div> <div class="grid-item" id="grid9"></div> </div> <div class="button-container"> <button id="x-el" onclick="selectX()">X</button> <button id="o-el" onclick="selectO()">O</button> </div> <div class="score-container"> <p id="playerscore">Player Score:</p> <p id="compscore">Computer Score:</p> </div> </main> <script> // Grab the elements let xBtn = document.getElementById('x-el') let oBtn = document.getElementById('o-el') let playerScoreDisplay = document.getElementById('playerscore') let compScoreDisplay = document.getElementById('compscore') let x = 'X' let o = 'O' let userChoice; let computerChoice; // Grabbing individual boxes let box1 = document.getElementById('grid1'); let box2 = document.getElementById('grid2'); let box3 = document.getElementById('grid3'); let box4 = document.getElementById('grid4'); let box5 = document.getElementById('grid5'); let box6 = document.getElementById('grid6'); let box7 = document.getElementById('grid7'); let box8 = document.getElementById('grid8'); let box9 = document.getElementById('grid9'); // Selecting x or o function selectX() { userChoice = x; computerChoice = o; alert('You selected X!'); } function selectO() { userChoice = o; computerChoice = x; alert('You selected O!'); } // using arrays to loop through divs function loopPositioning(array){ const randomIndex = Math.floor(Math.random()* array.length); const item = array[randomIndex]; return item; } const array = [1,2,3,4,5,6,7,8,9]; const result = loopPositioning(array); console.log(result); // looping all divs let boxes = document.querySelectorAll('div.grid-item').forEach(box => { box.addEventListener('click', event => { if (userChoice === x) { box.innerHTML = x; if (result == 1) { box1.innerHTML = o; } else if (result == 2) { box2.innerHTML = o; } else if (result == 3) { box2.innerHTML = o; } else if (result == 4) { box4.innerHTML = o; } else if (result == 5) { box5.innerHTML = o; } else if (result == 6) { box6.innerHTML = o; } else if (result == 7) { box7.innerHTML = o; } else if (result == 8) { box8.innerHTML = o; } else if (result == 9) { box9.innerHTML = o; } } else if (userChoice === o) { box.innerHTML = o; if (result == 1) { box1.innerHTML = x; } else if (result == 2) { box2.innerHTML = x; } else if (result == 3) { box2.innerHTML = x; } else if (result == 4) { box4.innerHTML = x; } else if (result == 5) { box5.innerHTML = x; } else if (result == 6) { box6.innerHTML = x; } else if (result == 7) { box7.innerHTML = x; } else if (result == 8) { box8.innerHTML = x; } else if (result == 9) { box9.innerHTML = x; } } }) }) </script> </body> </html>

How do I make the computer choice consistently pick a random box every time I place my move?每次下棋时，如何让计算机选择始终随机选择一个框？

1 个解决方案

解决方案1
 -1  2022-05-24 12:21:34

the problem with your code is you are calling the loopPositioning() only onces when the code enters execution.您的代码的问题是您只在代码进入执行时调用 loopPositioning() 一次。 so, you need to call the function everytime when a box is cicked.因此，每次选中一个框时，您都需要调用该函数。 here is your correct answer.这是你的正确答案。

  <script>
        // Grab the elements
        let xBtn = document.getElementById('x-el')
        let oBtn = document.getElementById('o-el')
        let playerScoreDisplay = document.getElementById('playerscore')
        let compScoreDisplay = document.getElementById('compscore')
        let x = 'X'
        let o = 'O'
        let userChoice;
        let computerChoice;

        // Grabbing individual boxes
        let box1 = document.getElementById('grid1');
        let box2 = document.getElementById('grid2');
        let box3 = document.getElementById('grid3');
        let box4 = document.getElementById('grid4');
        let box5 = document.getElementById('grid5');
        let box6 = document.getElementById('grid6');
        let box7 = document.getElementById('grid7');
        let box8 = document.getElementById('grid8');
        let box9 = document.getElementById('grid9');
        
        const array = [1,2,3,4,5,6,7,8,9];
        var result;
        
        // Selecting x or o
        function selectX() {
            userChoice = x;
            computerChoice = o;
            alert('You selected X!');
            
        }
        function selectO() {
            userChoice = o;
            computerChoice = x;
            alert('You selected O!');
            
        }

 // using arrays to loop through divs
 function loopPositioning(array){
            const randomIndex = Math.floor(Math.random()* array.length);
            const item = array[randomIndex];
            return item;
           
        }
       
        console.log(result);

        // looping all divs
        let boxes = document.querySelectorAll('div.grid-item').forEach(box => {
            box.addEventListener('click', event => {
               if (userChoice === x) {
                    box.innerHTML = x;
                    result = loopPositioning(array);

                        if (result == 1) {
                box1.innerHTML = o;
                } else if (result == 2) {
                    box2.innerHTML = o;
                } else if (result == 3) {
                    box2.innerHTML = o;
                } else if (result == 4) {
                    box4.innerHTML = o;
                } else if (result == 5) {
                    box5.innerHTML = o;
                } else if (result == 6) {
                    box6.innerHTML = o;
                } else if (result == 7) {
                    box7.innerHTML = o;
                } else if (result == 8) {
                    box8.innerHTML = o;
                } else if (result == 9) {
                    box9.innerHTML = o;
                }
                    
                    
                }  if (userChoice === o) {
                result = loopPositioning(array);
                    box.innerHTML = o;
                    if (result == 1) {
                box1.innerHTML = x;
                } else if (result == 2) {
                    box2.innerHTML = x;
                } else if (result == 3) {
                    box2.innerHTML = x;
                } else if (result == 4) {
                    box4.innerHTML = x;
                } else if (result == 5) {
                    box5.innerHTML = x;
                } else if (result == 6) {
                    box6.innerHTML = x;
                } else if (result == 7) {
                    box7.innerHTML = x;
                } else if (result == 8) {
                    box8.innerHTML = x;
                } else if (result == 9) {
                    box9.innerHTML = x;
                }
                    
                }
            })
        })

    </script>

Now, as you can see the variable result have a value everytime a user clicked on the box.现在，正如您所见，每次用户单击该框时，变量result都有一个值。 but i saw a bug on your code.但我在您的代码中看到了一个错误。 you are not mark the visited box as visited before.您没有将访问过的框标记为以前访问过。 So, even after you run this code you might see as the error you encountered before this is because it sets the innerHTML both x and 0 but modifies the previous visited boxes.因此，即使在运行此代码之后，您也可能会看到在此之前遇到的错误是因为它将 innerHTML 设置为 x 和 0，但修改了先前访问的框。 So, you need to mark the visited box as marked.因此，您需要将已访问的框标记为已标记。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 为什么这个jQuery .change事件在.click事件之后停止工作 - Why does this jQuery .change event stop working after .click event 为什么点击事件后悬停停止工作？ - Why does hover stop working after click event? 为什么我的 onclick 汉堡包按钮在活动结束后停止工作？ - Why does my onclick hamburger button stop working after event? 为什么我的 for 循环在执行一次后停止？ - Why does my for loop stop after one execution? 为什么我的代码仅在第二次单击后才能运行 - Why does my code only runs after a second click 为什么我的 onclick 功能只有在第一次点击后才能工作？ - Why does my onclick funciton only work after the first click? 单击后停止事件处理程序的运行 - Stop event handler from running, after one click 为什么我的“ click” eventListener仅在第一次单击后才能开始工作？ - Why does my 'click' eventListener only start working after the first click? 在我的点击事件中，只有一个复选框事件有效，但其他未检查 - on my click event only one checkbox event working but other is not checking 为什么点击事件只对一个元素有效？ - why click event only only work on one element?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM