CODEWITHSUNDEEP
javascript
OptimisticShaggy
OptimisticShaggy

Reputation: 23

Rock, Paper, Scissors - Javascript

Having this issue with trying to use addEventListener where the event I use does not read me clicking the button I have:

<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

What am I missing here with this Even issue?

Upvotes: 2

Views: 123

Answers (1)

Smokey Dawson
Smokey Dawson

Reputation: 9230

You have implemented addEventListener incorrectly

This 

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

Should be this

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

you could also use a regular function instead of an arrow function

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

so basically your event was firing.. but the callback function wasnt implemented correctly, thus why you never got your console.log()

below is working example

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>

Upvotes: 4

Related Questions