Javascript function is undefined on onclick event

[n_merciano]

Hi,

I am creating a simple Javascript PIG game.

For some reason my function is undefined when i click a querySelector which should call the function, but instead i get a console log error “undefined”.

my code:

var scores, roundScore, activePlayer, imgExt, btnRoll;

// App Settings
scores = [0,0];
roundScore = 0;
activePlayer = 1;
imgExt = '.png';
btnRoll = document.querySelector('.btn-roll');

// Hide the Dice on Default.
// document.querySelector('.dice').style.display = 'none'; // No need for CSS attr in JS.

var rollDice = function(){
    var dice = Math.floor(Math.random() * 6) + 1,
    diceDOM = document.querySelector('.dice');

    diceDOM.style.display = 'block';
    diceDOM.src = 'dice-' + dice + imgExt;
}
console.log(rollDice());

btnRoll.addEventListener('click', rollDice());

i’v also tried using window.onload function around the app but didn’t work for me.

Any solutions?

[Dormilich]

@n_merciano

Any solutions?

addEventlistener() expects a function to be given, not the execution result of a function (unless that is a function itself).

[Dormilich]

@n_merciano

console.log(rollDice());

rollDice() has no return statement, so it returns nothing, a.k.a. undefined

[n_merciano]

I have solved it… my mistake shouldn’t use the () if i want to run the function onclick based on my event.

This is my current code:

// The Global Variables which can be be used each time over an dover again inside a new function.
var i, scores, roundScore, activePlayer, imgExt, btnRoll, beginScore;

window.onload = function(){
    // App Settings
    scores = [0,0];
    roundScore = 0;
    activePlayer = 1;
    beginScore = 0;
    imgExt = '.png';
    btnRoll = document.querySelector('.btn-roll');

    function geBI(this_id){
        return document.getElementById(this_id);
    }

    var appArgs = [
        'score-0',
        'score-1',
        'current-0',
        'current-1'
    ];

    for(i = 0; i < appArgs.length; i++) {
        geBI(appArgs[i]).textContent = beginScore;
    }

    // geBI('score-0').textContent = beginScore;
    // geBI('score-1').textContent = beginScore;
    // geBI('current-0').textContent = beginScore;
    // geBI('current-1').textContent = beginScore;

    // Hide the Dice on Default.
    // document.querySelector('.dice').style.display = 'none'; // No need for CSS attr in JS.

    var rollDice = function(){
        var dice = Math.floor(Math.random() * 6) + 1,
        diceDOM = document.querySelector('.dice');

        diceDOM.style.display = 'block';
        diceDOM.src = 'dice-' + dice + imgExt;
    }

    btnRoll.addEventListener('click', rollDice);

    // document.querySelector('#current-' + activePlayer).textContent = dice;
    // document.querySelector('#current-' + activePlayer).innerHTML = '<em>' + dice + '</em>'; // Not prefered to use.. instead use plain HTML.
}

Also, i would love to get a opinion… i’v started with Javascript 1 month ago… instead of using getElementById over and over again… i’v created a function which returns the SINGLE id of each DOM element ID.

followed by a simple array with these ID’s and then creating a for loop.

Is this a better way to do it… it’s much cleaner and for sure less code.