Javascript: Function parameter not defined error

user_9322744 0
Viewed 43

Fooling around with a script to make a random square move on any web page with arrow keys. I'm encountering an error saying "e" does not exist.

var page = document.getElementsByTagName("body")[0];
var bruhmoment = document.createElement("div");
bruhmoment.style.height = "100px";
bruhmoment.style.width = "100px";
bruhmoment.style.display = "block";
function getColor(){
    var color = "#";
    for(var i = 0; i < 6; i++){
        color += ( Math.round(Math.random()) * 9 );
    }
    return color;
}
bruhmoment.style.backgroundColor = getColor();
bruhmoment.style.zindex = 1e9;
bruhmoment.id = "bruhmoment";
bruhmoment.style.marginLeft = "0px";
bruhmoment.style.marginBottom = "100px";
bruhmoment.xaxis = 0;
bruhmoment.yaxis = 0;
function move(e){
    switch(e.which){
        case 39:
            xaxis += 10;
            bruhmoment.style.marginLeft = xaxis + "px";
            break;
        case 37:
            xaxis -= 10;
            bruhmoment.style.marginLeft = xaxis + "px";
            break;
        case 38:
            yaxis += 10;
            bruhmoment.style.marginBottom = yaxis + "px";
            break;
        case 40:
            xaxis -= 10;
            bruhmoment.style.marginBottom = yaxis + "px";
            break;
        case 67:
            bruhmoment.style.backgroundColor = getColor();
            break;
    }
}
page.onkeydown = move(event);   
page.appendChild(bruhmoment);

Out of all the things in this code that could possibly be an error, I'm not sure how JavaScript chose that specific error to have a quarrel with. Could someone enlighten me?

function css html javascript
2 Answers

page.onkeydown = move(event); should just be page.onkeydown = move; to set the onkeydown handler to the move function.

Also,

bruhmoment.xaxis = 0;
bruhmoment.yaxis = 0;

should be just

xaxis = 0;
yaxis = 0;

since that's how they're used in the rest of the script and DOM elements dont have these attributes anyways.

There's also a typo after case 40: - it should be yaxis not xaxis.

marginTop, not marginBottom.

yaxis +=/-= should be swapped.

user_79412510

It should be page.onkeydown = move, and function move(evt){}. Note that after that, you have to declare e = event.

Also, your down arrow key was changing xaxis and not yaxis, you didn't declare xaxis and yaxis - you put in bruhmoment.xaxis and bruhmoment.yaxis, and you were changing marginBottom with the up and down keys, not marginTop. But, I fixed it :).

var page = document.getElementsByTagName("body")[0];
var bruhmoment = document.createElement("div");
bruhmoment.style.height = "100px";
bruhmoment.style.width = "100px";
bruhmoment.style.display = "block";
function getColor(){
    var color = "#";
    for(var i = 0; i < 6; i++){
        color += ( Math.round(Math.random()) * 9 );
    }
    return color;
}
bruhmoment.style.backgroundColor = getColor();
bruhmoment.style.zindex = 1e9;
bruhmoment.id = "bruhmoment";
bruhmoment.style.marginLeft = "0px";
bruhmoment.style.marginBottom = "100px";
var xaxis = 0;
var yaxis = 0;
function move(evt){
    e=event
    switch(e.which){
        case 37:  //Left
            xaxis -= 10;
            bruhmoment.style.marginLeft = xaxis + "px";
            break;
        case 38: //Up
            yaxis -= 10;
            bruhmoment.style.marginTop = yaxis + "px";
            break;
        case 39: //Right
            xaxis += 10;
            bruhmoment.style.marginLeft = xaxis + "px";
            break;
        case 40: //Down
            yaxis += 10;
            bruhmoment.style.marginTop = yaxis + "px";
            break;
        case 67: //Color change
            bruhmoment.style.backgroundColor = getColor();
            break;
    }
}
page.onkeydown = move;   
page.appendChild(bruhmoment);

Note that you might have to view the snippet in full page AFTER running to get rid of the weird scroll effect. (Click run, THEN go fullscreen, not before.)

user_142657490
Related