Question

在尝试使用addEventListener时遇到此问题，在该事件中我使用的事件无法读取我单击的按钮的信息：

<input type="button" name="rps_button" id="rps_button" class="box_styled" value="Try Your Luck!">
        <label for="rps_button"></label>

//The purpose of this JS file is for Rock Paper Scissors.

/*
1- Grab User input & store into variable userAnswer.
2- Get Computer input & store into variable compAnswer.
3- Switch case to compare both answers & give results. 

Loop to check which one is checked
*/


var rps = document.getElementById("rps_button");
var rps_radio = document.querySelectorAll('input[name="rps"]');

var userAnswer = "";
var compAnswer = "";

rps.addEventListener('click', console.log("Clicked!"));

function init(e) {
    uSer(userAnswer);
    console.log(userAnswer);    
}//[End] of Function

function uSer(userAnswer) {
    console.log(rps_radio.value);
    for (var i = 0; i < rps_radio.length; i++) {
        if (rps_radio[i].checked) {
            userAnswer = rps_radio[i]; 
        }//[End] of if
    }//[End] of Loop
    console.log(userAnswer);
    return userAnswer;
}//[End] of Function

这个偶数问题在这里我想念什么？

Answer 1

您实施的addEventListener错误

此

rps.addEventListener('click', console.log("Clicked!"));

应该是这个

rps.addEventListener('click', () => {
  console.log("Clicked!");
});

您还可以使用常规函数代替箭头函数

rps.addEventListener('click', function() {
  console.log("Clicked!");
});

所以基本上您的事件正在触发..但是回调函数未正确实现，因此为什么您没有得到console.log()

下面是可行的示例

const rps = document.getElementById("rps_button");
const rps_radio = document.querySelectorAll('input[name="rps"]');

let userAnswer = "";
let compAnswer = "";

rps.addEventListener('click', () => {
  console.log('clicked');
});

function init(e) {
    uSer(userAnswer);
    console.log(userAnswer);    
}

function uSer(userAnswer) {
    console.log(rps_radio.value);
    for (var i = 0; i < rps_radio.length; i++) {
        if (rps_radio[i].checked) {
            userAnswer = rps_radio[i]; 
        }
    }
    console.log(userAnswer);
    return userAnswer;
}

<input type="button" name="rps_button" id="rps_button" class="box_styled" value="Try Your Luck!">
<label for="rps_button"></label>

石头，剪刀，剪刀布-Javascript

1 个答案: