can someone make my code better. im trying to get it to say player one under one of the images so the user knows which character they are playing as . i

in short can you make it say player one underneath vs player 2 so they know who is who. player one is the user. make it have some indication that the user know who they are playing as please. i want this to be super interactive. this is my 3rd attempt at this. lol

html code

Player 1

javascript code

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-whiteormal/charizard.png', 360,[

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

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

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

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

]],

['Blastoise', 'https://img.pokemondb.net/sprites/black-whiteormal/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.net/sprites/black-whiteormal/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']],

}

//definition of new start_game() function that displays the message of let's begin the game with the user name

function start_game(){

let text;

let player = document.getElementById("nickName").value;

text = "Hello " + player + "! Let's start the game.";

//displaying alert for starting the game

alert(text);

//changing the name of the player on the screen

document.getElementById("player1").innerHTML = player;

}

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

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

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()

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

if(f!=false){

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

document.getElementById(hp).innerHTML = '

HP: 0/' + f.fullhp + '

';

setTimeout(function(){

location.reload();

},1500)

}

}

css code

th, td{

padding: 15px;

}

.btn{

display: block;

width: 100%;

}

p{

font-family: consolas;

}

table.table{

margin-left: auto;

margin-right: auto;

}

body{

background-color: aquamarine;

}

h1, h3, div{

text-align: center;

}