不会让我设置 class 的名称 Javascript 创建的 div

Question

I'm using a function to create a div element on the page. I want to assign a className but I get the error: cannot set property className of undefined.

But I did this in another function and it worked. Why is this one not working?

If I failed to provide the code relevant to the problem I apologize. I'm in a rush and included code that I thought might be relevant in order of relevancy.

** WORKING FUNCTION **

function makeBomb() {
    if (player.ready && (player.hasBomb < player.maxBombs)) {
        player.score -= 300;
        player.hasBomb++;
        player.bomb = document.createElement('div');
        player.bomb.className = 'bomb'; //DOESN'T THROW ERROR ----
        gameArea.appendChild(player.bomb);
        player.bomb.x = player.x;
        player.bomb.y = player.y;
        player.bomb.style.left = player.bomb.x + 'px';
        player.bomb.style.top = player.bomb.y + 'px';
        player.ready = false;
        setTimeout(function () {
            player.ready = true;
        }, 1000);
    }
 }

** NOT WORKING FUNCTION **

function makeBullet() {
    if (player.enemy.bulletCount < player.enemy.maxBulletCount && 
player.enemy.bulletInterval == true)

    player.enemy.bullet = document.createElement('div');
    player.enemy.bullet.className = 'bullet';  //THROWS ERROR -----
    gameArea.appendChild(player.enemy.bullet);
    player.enemy.bullet.x = player.enemy.x;
    player.enemy.bullet.y = player.enemy.y;
    player.enemy.bullet.style.left = player.enemy.bullet.x + 
(player.enemy.offsetWidth / 3) + 'px';
    player.enemy.bullet.style.top = player.enemy.bullet.y + 
(player.enemy.offsetHeight / 4) + 'px';
    player.enemy.bulletCount++;
    player.enemy.bulletInterval = false;
    setInterval(function(){
        player.enemy.bulletInterval = true;
    }, 4000);
}

** STARTING CODE THAT MIGHT HAVE CONTEXT IDK**

function start() {
    if (player.games === 1) {
        gameArea.removeChild(finalScore);
    }
    gameMessage.style.display = 'none';
    score.style.display = "inline-block";
    scoreArea.style.display = "inline-block";
    text.style.display = "inline-block";
    player.inplay = true;
    makeEnemy();
    player.plane = document.createElement("div");
    player.plane.setAttribute("class", "plane");

    gameArea.appendChild(player.plane);

    player.enemy.x = player.enemy.offsetLeft;

    player.enemy.y = player.enemy.offsetTop;

    player.x = player.plane.offsetLeft;

    player.y = player.plane.offsetTop;


    window.requestAnimationFrame(playGame);


}

** OTHER CODE THAT MIGHT HAVE CONTEXT **

function makeEnemy() {

    player.enemy = document.createElement('div');
    player.enemy.className = 'enemy';
    player.enemy.style.left = Math.floor(Math.random() * . 
   gameArea.offsetWidth - 300) + 100 + 'px';


    gameArea.appendChild(player.enemy);
    player.enemy.x = player.enemy.offsetLeft;

}

** JUST IN CASE YOU NEED -- idk its hard for me to keep track of everything that might be related to the problem... sorry.. **

title.addEventListener("click", changeColor);

const gameArea = document.querySelector(".gameArea");
const game = document.querySelector(".game");
const scoreArea = document.querySelector(".scoreArea");
const score = document.querySelector(".score");
const text = document.querySelector(".text");


document.addEventListener('keydown', pressOn);
document.addEventListener('keyup', pressOff);
gameMessage.addEventListener('click', start);

let player = {
    score: 2000,
    speed: 5,
    inplay: false,
    ready: true,
    maxBombs: 4,
    hasBomb: 0,
    hit: 0,
   hitMax: 9,
   games: 0,
    enemy: {
        x: 0
    },
    getHit: 0,
    getHitMax: 20,
    swing: false

}

let keys = {
   space: false
}

** FULL JS FILE: BE WARNED IM VERY NEW AND THIS IS NOT GOOD CODE **

const title = document.querySelector(".title");
const gameMessage = document.querySelector(".gameMessage");


function changeColor() {
    let newArray = ["darksalmon", "lightsalmon", "crimson", "red", "deeppink", "yellowgreen", "ghostwhite"];
    let random = Math.floor(Math.random() * Math.floor(newArray.length - 1));
    if (title.style.color != newArray[random]) {
        title.style.color = newArray[random];
        console.log(title.style.color);
    } else {
        changeColor();
    }
}


title.addEventListener("click", changeColor);

const gameArea = document.querySelector(".gameArea");
const game = document.querySelector(".game");
const scoreArea = document.querySelector(".scoreArea");
const score = document.querySelector(".score");
const text = document.querySelector(".text");


document.addEventListener('keydown', pressOn);
document.addEventListener('keyup', pressOff);
gameMessage.addEventListener('click', start);

let player = {
    score: 2000,
    speed: 5,
    inplay: false,
    ready: true,
    maxBombs: 4,
    hasBomb: 0,
    hit: 0,
    hitMax: 9,
    games: 0,
    enemy: {
        x: 0
    },
    getHit: 0,
    getHitMax: 20,
    swing: false

}

let keys = {
    space: false
}

function start() {
    if (player.games === 1) {
        gameArea.removeChild(finalScore);
    }
    gameMessage.style.display = 'none';
    score.style.display = "inline-block";
    scoreArea.style.display = "inline-block";
    text.style.display = "inline-block";
    player.inplay = true;
    makeEnemy();
    player.plane = document.createElement("div");
    player.plane.setAttribute("class", "plane");

    gameArea.appendChild(player.plane);

    player.enemy.x = player.enemy.offsetLeft;

    player.enemy.y = player.enemy.offsetTop;

    player.x = player.plane.offsetLeft;

    player.y = player.plane.offsetTop;


    window.requestAnimationFrame(playGame);


}



function playGame() {
    if (player.inplay) {
        moveBomb();

        if(player.x < (gameArea.offsetWidth / 2)) {
            console.log('WORKED');
            makeBullet();
        }

        if (player.swing){
                 player.plane.style.backgroundImage ='url(guts1.png)';
                 player.swing = false;
                 //player.plane.style.width = 210 + 'px';

                }


        if (keys['x'] && player.enemy && isCollide(player.plane, player.enemy)) {
                removeEnemy();
            }



        if (player.enemy) {


            if (isCollide(player.plane, player.enemy)) {


                player.getHit++;
                if (player.getHit > player.getHitMax){
                    endGame();
                }    
            } else {
                player.getHit = 0;
            }
            if (player.x > player.enemy.x) {
                player.enemy.x += 1;
            }
            if (player.x < player.enemy.x) {
                player.enemy.x -= 1;
            }
            player.enemy.style.left = player.enemy.x + 'px';
        }

        if (player.hasBomb >= player.maxBombs && player.bomb.y > gameArea.offsetHeight - 20) {

            endGame();
        }
        if (keys.space) {
            makeBomb()

        }
        if (keys.ArrowUp && player.y > 0) {
            player.y -= (player.speed + (player.speed * .5));
        }
        if (keys.ArrowDown && player.y < (gameArea.offsetHeight - player.plane.offsetHeight - 30)) {
            player.y += (player.speed + (player.speed * .5));
        }
        if (keys.ArrowLeft && player.x > 0) {
            player.x -= (player.speed + (player.speed * .5));
        }
        if (keys.ArrowRight && player.x < (gameArea.offsetWidth)) {
            player.x += (player.speed - (player.speed * .5));
        }

        if (player.x == (gameArea.offsetWidth)) {
            player.x = 0;
            player.score -= 100;
            if (!player.enemy) {
                makeEnemy();
            }
        }

        player.score -= .4;

        if (player.score < 0) {
            player.score = 0;
        }

        player.x += (player.speed * .5);


        score.innerHTML = Math.floor(player.score) + ' Bombs left: ' + (player.maxBombs - player.hasBomb);



        player.plane.style.left = player.x + 'px';
        player.plane.style.top = player.y + 'px';

        window.requestAnimationFrame(playGame);
    }
}

function pressOn(e) {
    e.preventDefault();
    let tempKey = (e.key == " ") ? "space" : e.key;
    keys[tempKey] = true;

        if (keys['x'] && player.swing == false){
                 playerPlane = player.plane;
                 player.plane.style.backgroundImage ='url(guts2.png)';
                 setTimeout(function () {
                 player.swing = true;
                 }, 300);
                 //player.plane.style.width = 400 + 'px';
                }
    console.log(tempKey)
    console.log(keys);

}

function pressOff(e) {
    e.preventDefault();
    let tempKey = (e.key== " ") ? "space" : e.key;
    console.log(tempKey);

//    if (keys['x'] && player.swing){
//               playerPlane = player.plane;
//               player.plane.style.backgroundImage ='url(guts1.png)';
//                 player.swing = false;
//                 //player.plane.style.width = 210 + 'px';
//              
//              }

    if (keys['space'] || keys['x']) {
    keys['space'] = 0;
    keys['x'] = 0;
    }
    keys[tempKey] = false;
    console.log(keys);
}

function moveBomb() {
    let bombs = document.querySelectorAll('.bomb');
    bombs.forEach(function (item) {
        item.y += 10;
        item.style.top = item.y + 'px';
        if (item.y > gameArea.offsetHeight) {
            item.parentNode.removeChild(item);
            player.bomb = null;
        }
        if (player.enemy && player.bomb) {
            if (isCollide(item, player.enemy)) {
               player.hit++;

            }

        }

        if (player.hit > player.hitMax) {
            item.parentNode.removeChild(item);
            player.bomb = null;
            player.score += 2000;
            player.hit = 0;
            player.hasBomb -= 2
            gameArea.removeChild(player.enemy);
            player.enemy = null;
        }
    })
}

function makeEnemy() {

    player.enemy = document.createElement('div');
    player.enemy.className = 'enemy';
    player.enemy.style.left = Math.floor(Math.random() * gameArea.offsetWidth - 300) + 100 + 'px';


    gameArea.appendChild(player.enemy);
    player.enemy.x = player.enemy.offsetLeft;

}

//function getLocationX(a){
//    let aRect = a.getBoundingClientRect();
//    let aX = aRect.x;
//    return aX;
//   //w console.log(aX);
//}
//
//function getLocationY(a){
//    let aRect = a.getBoundingClientRect();
//    let aY = aRect.y;
//    return aY;
//   // console.log(aY);
//}

function isCollide(a, b) {
    let aRect = a.getBoundingClientRect();
    let bRect = b.getBoundingClientRect();
    return !(
        (aRect.bottom < bRect.top) ||
        (aRect.top > bRect.bottom) ||
        (aRect.right < bRect.left) ||
        (aRect.left > bRect.right)
    )
}

function makeBomb() {
    if (player.ready && (player.hasBomb < player.maxBombs)) {
        player.score -= 300;
        player.hasBomb++;
        player.bomb = document.createElement('div');
        player.bomb.className = 'bomb';
        gameArea.appendChild(player.bomb);
        player.bomb.x = player.x;
        player.bomb.y = player.y;
        player.bomb.style.left = player.bomb.x + 'px';
        player.bomb.style.top = player.bomb.y + 'px';
        player.ready = false;
        setTimeout(function () {
            player.ready = true;
        }, 1000);
    }
}


function makeBullet() {
    if (player.enemy.bulletCount < player.enemy.maxBulletCount && player.enemy.bulletInterval == true)

    player.enemy.bullet = document.createElement('div');
    player.enemy.bullet.className = 'bullet';
    gameArea.appendChild(player.enemy.bullet);
    player.enemy.bullet.x = player.enemy.x;
    player.enemy.bullet.y = player.enemy.y;
    player.enemy.bullet.style.left = player.enemy.bullet.x + (player.enemy.offsetWidth / 3) + 'px';
    player.enemy.bullet.style.top = player.enemy.bullet.y + (player.enemy.offsetHeight / 4) + 'px';
    player.enemy.bulletCount++;
    player.enemy.bulletInterval = false;
    setInterval(function(){
        player.enemy.bulletInterval = true;
    }, 4000);
}

function endGame() {
    if (player.enemy) {
        gameArea.removeChild(player.enemy);
    }
    gameArea.removeChild(player.plane);
    if (player.bomb){
        gameArea.removeChild(player.bomb);
        player.bomb = null;
    }
    score.style.display = 'none';
    scoreArea.style.display = 'none';
    text.style.display = 'none';
    gameMessage.style.display = 'inline-block';
    player.inplay = false;
    player.hasBomb = 0;
    finalScore = document.createElement('div');
    finalScore.classList.add('finalScore');
    finalScore.innerHTML = 'YOU SCORED: ' + Math.floor(player.score);
    gameArea.appendChild(finalScore);
    player.games = 1;
    player.getHit = 0;
}

function removeEnemy() {
    gameArea.removeChild(player.enemy);
    player.enemy = null;
    player.score += 2000;
}

Answer 1

function makeBullet() {
    if (player.enemy.bulletCount < player.enemy.maxBulletCount && 
player.enemy.bulletInterval == true)

youre missing curly braces at the end of the if statement and i think its interpretting the next line as a part single line if statement

change to

function makeBullet() {
    if (player.enemy.bulletCount < player.enemy.maxBulletCount && 
player.enemy.bulletInterval == true) {
        ...
        ...
        ...
    }
}