Onclick event handler not assigning to element

Get Help JavaScript
#1

Hey there,

I’m working on the Portfolio Project to make a Portfolio Website, and trying to get my JavaScript working on the site.

The intended purpose is for at the website load to randomly select 1 of 3 images that are hidden on the page, and unhide it.
Then, an .onclick event handler is supposed to listen for any clicks on the currently displayed image, and on click make that image disappear and randomly make a new image of the three visible.

The first random image is made visible, but the event listener isn’t being triggered when it is clicked. I can’t figure out if it’s a problem with the .onclick or a problem with the variable assignments I’m using it on with earlier functions. Looking at the Chrome Devtool events it doesn’t seem to even show the event listener on the image.
Here’s the JavaScript:

function randomPosition () {

    return (Math.random() * 3);

}

let assignedPos = '';

let newPos = '';

const pos1 = document.getElementById('drone-pos1');

const pos2 = document.getElementById('drone-pos2');

const pos3 = document.getElementById('drone-pos3');

function assignPos () {

    let randPos = randomPosition();

    if (randPos < 1) {

        newPos = pos1;

    } else if (randPos < 2) {

        newPos = pos2;

    } else {

        newPos = pos3;

    }

}

function moveDrone () {

    assignPos();

    assignedPos.style.visibility = 'hidden';

    newPos.style.visibility = 'visible';

    assignedPos = newPos;

}

function loadDrone () {

    assignPos();

    newPos.style.visibility = 'visible';

    assignedPos = newPos;

}

window.onload = loadDrone();

assignedPos.onclick = moveDrone();
#2

Hi!

First, in the line window.onload = loadDrone(); your loadDrone will not be executed after page loaded. You execute loadDrone immediately and assign the result of execution (undefined) to window.onload. In this case, parentheses are not needed: window.onload = loadDrone;. With onclick the situation is the same.

But with the onload handler properly set, the next line will not work as expected, because loadDrone will be executed after the page is loaded, and assignedPos.onclick = moveDrone will be executed immediately on the string you set in the let assignPos = '';.

Since you are reassigning assignedPos in loadDrone and moveDrone, you need to set the onclick listener there. Try setting an onclick listener on assignedPos after you set assignedPos to newPos. And remove onclick listener for the previous assignedPos before changing it to newPos.

1 Like
#3

Thank you so much for the quick and detailed response!

Those suggestions fixed it and the logic makes total sense why it wasn’t working.

I removed the assignedPos.onclick = moveDrone; at the end of the script, and put it at the end of the loadDrone() function. That got it to recognize a click one time only, which got me to realize that I also needed to assign a new listener each time I ran the moveDrone() function and changed the image that was appearing.

I learned a couple new and very helpful things, so thank you!

1 Like