如何根据用户的选择制作不同的文本？

Question

I'm making a Tic Tac Toe game where the user can choose if they play X or O. How do I change the onclick function to display X if they chose X, or O if they chose O?我正在制作一个井字游戏，用户可以在其中选择他们玩 X 还是 O。如果他们选择 X，我如何更改 onclick 功能以显示 X，或者如果他们选择 O，则显示 O？

My code right now doesn't work since it only displays X even if I selected O from the two buttons.我的代码现在不起作用，因为即使我从两个按钮中选择了 O，它也只显示 X。

Note: The other boxes don't have a function yet.注意：其他盒子还没有功能。 To see the problem I'm talking about, click the first box on the upper left.要查看我正在谈论的问题，请单击左上角的第一个框。

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

 <!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" onclick="clickBox1()"></div> <div class="grid-item" id="grid2" onclick="clickBox2()" ></div> <div class="grid-item" id="grid3" onclick="clickBox3()"></div> <div class="grid-item" id="grid4" onclick="clickBox4()"></div> <div class="grid-item" id="grid5" onclick="clickBox5()"></div> <div class="grid-item" id="grid6" onclick="clickBox6()"></div> <div class="grid-item" id="grid7" onclick="clickBox7()"></div> <div class="grid-item" id="grid8" onclick="clickBox8()"></div> <div class="grid-item" id="grid9" onclick="clickBox9()"></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' // 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'); /* let boxes = document.querySelectorAll("div.grid-item") */ // Selecting x or o function selectX() { alert('You selected X!'); } function selectO() { alert('You selected O!'); } // Function for each box function clickBox1() { if (selectX) { box1.innerHTML = x; } else if (selectO) { box1.innerHTML = o; } } </script> </body> </html>

Answer 1

You would probably want to create a variable to save the user's choice and set it depending on whether or not they clicked on "x-el" or "o-el" like so below.您可能希望创建一个变量来保存用户的选择并根据他们是否单击“x-el”或“o-el”来设置它，如下所示。

Also, loop through the boxes instead of creating a function for every single box.此外，循环遍历这些框，而不是为每个框创建一个函数。

    // user's choice      
    let myChoice
    // Selecting x or o
    function selectX() {
        alert('You selected X!');
        myChoice='X'
    }
    function selectO() {
        alert('You selected O!');
        myChoice='O'
    }

    // Function for each box
    function clickBox1() {
        if (myChoice==='X') {
            box1.innerHTML = x;
        } else if (myChoice==='O') {
            box1.innerHTML = o;
        }
    }

如何根据用户的选择制作不同的文本？

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-05-24 02:03:23

如何根据用户的选择制作不同的文本？

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-05-24 02:03:23

解决方案1
0 已采纳 2022-05-24 02:03:23