JavaScript 函数返回 undefined。循环访问单击事件的按钮节点列表-解网

问：

在尝试调整我的控制台 .log 石头剪刀布游戏以使用 GUI 时 - 我已经为用户输入设置了按钮，但我放在一起的函数一直返回未定义（getPlayerSelection）。

具体来说，我正在尝试返回单击的按钮的文本内容，以便我可以将其用作用户的输入。console.log（input）显示正确的字符串，但是当我尝试返回该值时，它总是显示为未定义。

[HTML全文]

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rock Paper Scissors!</title>
</head>
<body>

    <section id="choices">
    <button class="button">Rock!</button>
    <button class="button">Paper!</button>
    <button class="button">Scissors!</button>
    </section>

    <script src="javascript.js" defer></script>
</body>

JAVASCRIPT的

    // player input

function getPlayerSelection(){

        const buttons = document.getElementsByClassName('button');

        let input = '';
            
        for (const btn of buttons) {
            btn.addEventListener('click', () => {
                input =  btn.textContent;
                console.log(input);
            })
        }

        return input;
    
    }


    // computer input

function getComputerChoice(){
        let randomChoice = Math.floor(Math.random() * 3);
            
        if(randomChoice === 0){
            return("Rock!")
        } else if(randomChoice === 1){
            return("Paper!")
        } else {
            return("Scissors!")
        }
    }


function playRound(playerSelection, computerSelection) {

    playerSelection = getPlayerSelection();
    computerSelection = getComputerChoice();

我尝试为每个按钮设置单独的类名并拥有自己的事件侦听器，但我认为我一定误解了 DOM 操作的工作原理。这也返回 undefined。

    const rockBtn = document.querySelector('.rockButton');
    rockBtn.addEventListener('click', () => {
        return 'Rock!';
    });

    const paperBtn = document.querySelector('.paperButton');
    paperBtn.addEventListener('click', () => {
        return 'Paper!';
    });

    const scissorsBtn = document.querySelector('.scissorsButton');
    scissorsBtn.addEventListener('click', () => {
        return 'Scissors!';
    });

JavaScript 函数 DOM 事件 undefined

从附加了 addEventListener 的处理程序返回没有效果（您希望在哪里看到返回的值？至于你根本没有指定返回值，没有显式返回值的函数总是返回未定义值。不过，该函数将侦听器附加到每个按钮，因此单击它们应按预期记录。getPlayerSelection()

0赞 Heretic Monkey 8/31/2023

虽然这不是错误，但在从函数返回数据时使用括号是不寻常的。IOW，只需使用而不是 .此外，在定义变量（即 vs ）时要小心使用（或者更好）。return "Rock!";return("Rock!")varconstconst input = btn.textContent;input = btn.textContent;

0赞 AaronDKP 8/31/2023

谢谢你们俩的回复。我刚刚用我之前的尝试更新了上面的 js - 你知道我如何将 textContent 分配给循环之外的变量，以便函数可以返回它吗？

0赞 dale landry 8/31/2023

您可以使用 event.target 来获取所选按钮。循环访问按钮并添加“click”事件侦听器以将事件传递到回调函数中。也许将唯一 ID 添加到选项将允许您使用类似 e.target.id

答：

0赞 Chisom Udonsi 8/31/2023 #1

代码的问题在于，您的高阶函数 playGround 结构不佳，您尝试在通过 DOM API 挂接到按钮之前返回按钮的文本内容。

没有记录错误，因为您使用空字符串初始化了输入变量，因此返回的只是一个空字符串。

长话短说，每当调用 playGround 函数时，都会返回空的输入变量，在链接代码中的按钮之前调用该函数。

以下代码应该可以工作，您可以根据需要对其进行调整

[HTML全文]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Rock Paper Scissors!</title>
    <script src="javascript.js" defer></script>
  </head>
  <body>
    <section id="choices">
      <button class="button">Rock!</button>
      <button class="button">Paper!</button>
      <button class="button">Scissors!</button>
    </section>
  </body>
</html>

JS系列

const buttons = document.getElementsByClassName("button");
for (const btn of buttons) {
  btn.addEventListener("click", () => {
    playRound(btn.textContent);
  });
}

function getPlayerSelection(input) {
  return input;
}

function getComputerChoice() {
  let randomChoice = Math.floor(Math.random() * 3);

  if (randomChoice === 0) {
    return "Rock!";
  } else if (randomChoice === 1) {
    return "Paper!";
  } else {
    return "Scissors!";
  }
}

function playRound(playerSelection) {
  playerSelection = getPlayerSelection(playerSelection);
  computerSelection = getComputerChoice();
  console.log(`Player: ${playerSelection}`, `Computer: ${computerSelection}`);
}

JavaScript 函数返回 undefined。循环访问单击事件的按钮节点列表

JavaScript function returning undefined. Looping through nodelist of buttons for click event

评论

评论