為什么我的`button.value`沒有給出任何輸出，即使按鈕包含一些文本-有解無憂

所以，我正在嘗試制作井字游戲。到目前為止似乎進展順利，除了我無法獲得該按鈕具有的任何值[使用輸入到按鈕中的文本event.target.innerText]。當我嘗試使用它列印出來時，console.log()它顯示按鈕中不存在任何值，盡管我為按鈕輸入了一個值。你能告訴我如何解決這個錯誤嗎？這是相同的螢屏截圖

為什么我的`button.value`沒有給出任何輸出，即使按鈕包含一些文本

const buttons=document.querySelectorAll(".Grid-Button");
const MessageBox=document.querySelector("#Message-Box");

choice=["X","O"];
turn=choice[0]; //Initally its X's turn[Will change this later, so that it is could be anyone's turn at the start]
MessageBox.innerText=turn "'s Turn";
for(i=0;i<9;i  )
{
    buttons[i].addEventListener("click",input);
}

function input()
{
    gameOverCheck=false;

    if(turn === "X")
    {
        event.target.innerText=turn;
        event.target.disabled=true;
        event.target.style.color="green";
        event.target.style.border="1px solid black"
        if(check() === 1)
        {
            gameOverCheck=true
        }
        turn=choice[1];
    }

    else if(turn === "O")
    {
        event.target.innerText=turn;
        event.target.disabled=true;
        event.target.style.color="green";
        event.target.style.border="1px solid black"
        if(check() === 1)
        {
            gameOverCheck=true
        }
        turn=choice[0];
    }
    if(gameOverCheck === false)
    {
    MessageBox.innerText=turn "'s Turn";
    }
}

function check()
{
    console.log("Values of buttons=" buttons[0].value buttons[1].value buttons[2].value)
    if(buttons[0].value === "X" && buttons[1].value === "X" && buttons[2].value === "X" )
    {
        console.log("Entered")
        return 1;
    }
}

這是相同的HTML檔案

<!DOCTYPE html>
<html lang="en">
<head>
    <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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h2>Tic Tac Toe Game</h2>
    <div >
        <button ></button>
        <button ></button>
        <button ></button>
        <button ></button>
        <button ></button>
        <button ></button>
        <button ></button>
        <button ></button>
        <button ></button>
    </div>
    <div id="Message-Box"></div>
    <script src="app.js"></script>
</body>
</html>

uj5u.com熱心網友回復：

當您嘗試訪問 button[index].value 以訪問值時，問題似乎很明顯。通常，只有輸入元素往往具有與之關聯的值屬性，而且您也只為相應按鈕的 innerText 提供了“X”或“Y”。用下面的代碼替換buttons[index].value。

console.log("Values of buttons="   buttons[0].innerText buttons[1].innerText buttons[2].innerText)
if(buttons[0].innerText=== "X" && buttons[1].innerText === "X" && buttons[2].innerText === "X" ){
  console.log("Entered")
  return 1;
}

uj5u.com熱心網友回復：

value用于輸入欄位。您正在使用 a<button>并且button.value不存在。你可以做button.innerText。與您分配的方式相同。

let button = document.getElementById('s');
console.log(button.value);
console.log(button.innerText);

<button id="s">SOMETEXT</button>

uj5u.com熱心網友回復：

您錯過了分配值，例如event.target.value="X";

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/492267.html

標籤：javascript

上一篇：陣列concat正在覆寫for..each回圈中的值

下一篇：如何將串列、字典、int保存到檔案中，并從檔案中分配回來