hi I need help with my code. I'm trying to display a start button on my page to start the game and its not working.

i also wanted to know how to have player one box show so the user knows who is who if that makes sense when the battle starts.

this is what I have so far for my javascript.. the html will be at the bottom..

//1. assign a button to start the game

const startBtn = document.querySelector('#start-btn');

//2. create a function to click on the button then button disappears

function startGame(){

startBtn.classList.toggle("hide");

playerName.classList.toggle("hide");

}

//3. create input for the player to insert their name

const playerName = document.querySelector('#player-name');

const nicknameEL = document.querySelector("#nickName");

//4. as player click on start button, button will disappear and form to input nickname will appear.

startBtn.addEventListener("click", startGame);

const welcomeEl = document.querySelector('#welcome');

//5. add submit button

const submitBtn = document.createElement('button');

submitBtn.textContent = 'Submit';

playerName.appendChild(submitBtn);

//6. submit function to toggle the visibility of welcome message and player name form

function submit(){

welcomeEl.classList.toggle("hide");

playerName.classList.toggle('hide');

welcomeEl.textContent = (` ${nicknameEL.value.toUpperCase()}! YOUR BATTLE IS STARTING NOW`);

}

//7. add event listener to submit button

submitBtn.addEventListener('click', submit);

class Pokemon{

constructor(name, sprite, hp, moves){

this.name = name;

this.sprite = sprite;

this.hp = hp;

this.fullhp = hp;

this.moves = moves;

}

}

let pkmList = [

['Charizard', 'https://img.pokemondb.net/sprites/black-white/normal/charizard.png', 360,[

['Flamethrower', 'fire', 95, 0.95],

['Dragon Claw', 'dragon', 80, 0.95],

['Air Slash', 'fly', 75, 0.85],

['Slash', 'normal', 70, 0.9]

]],

['Blastoise', 'https://img.pokemondb.net/sprites/black-white/normal/blastoise.png', 362,[

['Surf', 'water', 90, 0.95],

['Crunch', 'normal', 80, 0.95],

['Ice Punch', 'ice', 75, 0.95],

['Flash Cannon', 'steel', 80, 0.95]

]],

['Venusaur', 'https://img.pokemondb

]],

['Venusaur', 'https://img.pokemondb.net/sprites/black-white/normal/venusaur-f.png', 364,[

['Petal Blizzard', 'grass', 90, 0.95],

['Sludge bomb', 'poison', 90, 0.95],

['Earthquake', 'ground', 100, 0.95],

['Body Slam', 'normal', 85, 0.95]

]]

];

let typeMatch = {

'Charizard': [['ground'],['water', 'rock'], ['fire', 'grass', 'steel']],

'Blastoise':[[''],['grass'],['fire', 'water']],

'Venusaur':[['poison'],['fire', 'fly', 'ice', 'steel'],['grass', 'water']],

}

function spawn(bool){

let p = pkmList[Math.floor(Math.random()*pkmList.length)];

let pkm = new Pokemon(p[0], p[1], p[2], p[3]);

if(bool){

for(i=0; i<4; i++){

document.getElementById('m'+i).value = pkm.moves[i][0];

}

}

return pkm;

}

let pk1 = spawn(true);

s1 = document.createElement('img');

s1.src = pk1.sprite;

document.getElementById('pk1').appendChild(s1);

document.getElementById('hp1').innerHTML = '

HP: ' + pk1.hp + '/' + pk1.fullhp + '

';

let pk2 = spawn(false);

s2 = document.createElement('img');

s2.src = pk2.sprite;

document.getElementById('pk2').appendChild(s2);

document.getElementById('hp2').innerHTML = '

HP: ' + pk2.hp + '/' + pk2.fullhp + '

';

for(i=0; i<4; i++){

let btn = document.getElementById('m'+i);

let move = pk1.moves[i];

function addHandler(btn, move, pk1, pk2){

btn.addEventListener('click', function(e){

attack(move, pk1, pk2, 'hp2', '');

setTimeout(attack,2000, pk2.moves[Math.floor(Math.random()*3)], pk2, pk1, 'hp1', 'Foe ');

});

}

addHandler(btn, move, pk1, pk2);

}

function attack(move, attacker, receiver, hp, owner){

document.getElementById('comment').innerHTML = '

' + owner + attacker.name + ' used ' + move[0] + '!

';

if(Math.random() < move[3]){

let power = move[2] += Math.floor(Math.random()*10);

let rtype = typeMatch[receiver.name];

let mtype = move[1];

let scale = 1;

for(i=0; i

if(rtype[i].includes(mtype)){

switch(i){

case 0:

scale = 0;

setTimeout(function(){

document.getElementById('comment').innerHTML = '

It had no effect!

';

},1000);

break;

case 1:

scale = 2;

setTimeout(function(){

document.getElementById('comment').innerHTML = '

It was super effective!

';

},1000);

break;

case 2:

scale = 0.5;

setTimeout(function(){

document.getElementById('comment').innerHTML = '

It was not very effective!

';

},1000);

break;

}

break;

}

}

power *= scale;

receiver.hp -= Math.floor(power);

document.getElementById(hp).innerHTML = '

HP: ' + receiver.hp + '/' + receiver.fullhp + '

';

}

else{

setTimeout(function(){

document.getElementById('comment').innerHTML = '

Attack missed!

';

})

}

checkWinner(hp);

}

function checkWinner(hp){

let f = (pk1.hp <=0) ? pk1 : (pk2.hp<=0) ? pk2 : false;

if(f!=false){

alert('GAME OVER: ' + f.name +' fainted!');

document.getElementById(hp).innerHTML = '

HP: 0/' + f.fullhp + '

';

setTimeout(function(){

location.reload();

},1500)

}

}

HTML CODE

Pokemon Battle

Please Enter Your Name

Name: