hi could someone please help me create a functional start button for my game. I have one in my html and it does appear after typing in my name but I want it to do something with the name such as console logging the user name after entering it and saying something along the lines of lets begin this battle.

how do i make sure that my javascript and html do this.

my html for reference

Player 1

my javascript for reference. please help. if there is any errors in my code please help me correct them as well..

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, ]

]],

['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.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)

}

}