How to use funcion inside other function? : I dont know how to make function 'bot_turn' work after function 'player_turn'

Maybe there are some problems with two 'while' functions





    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset ="utf-8">
    	<title>Tic Tac Toe</title>
    </head>
    <body>
    <script type="text/javascript">
    	var asasa=0;
    	var lal=-1;
    	var end_game=0;
    	var asass=0
    </script>
    
    
    
    
    <table border='1px' width='500px' height='500px' align="center">
    <tr>
    <td id='tables1' class="one" style="font-size: 50px; text-align:center;" onclick="this.style.backgroundColor = '#045d99';asasa=1; player_turn(); "></td>
    <td id='tables2' class="two" style="font-size: 50px; text-align:center;" onclick="this.style.backgroundColor = '#045d99';asasa=2; player_turn();"></td>
    <td id='tables3' class="three" style="font-size: 50px; text-align:center;" onclick="this.style.backgroundColor = '#045d99';asasa=3; player_turn();"></td>
    </tr>
    
    
    
    
    
    <tr style='border-color: red'>
    <td id='tables4' class="four" style="font-size: 50px; text-align:center;" onclick="this.style.backgroundColor = '#045d99';asasa=4; player_turn(); " ></td>
    <td id='tables5' class="five" style="font-size: 50px; text-align:center;" onclick="this.style.backgroundColor = '#045d99';asasa=5; player_turn();"></td>
    <td id='tables6' class="six" style="font-size: 50px; text-align:center;" onclick="this.style.backgroundColor = '#045d99';asasa=6; player_turn();"></td>
    </tr>
    
    
    
    
    
    <tr style='border-color: red'>
    <td id='tables7' class="seven" style="font-size: 50px; text-align:center;" onclick="this.style.backgroundColor = '#045d99';asasa=7; player_turn();"></td>
    <td id='tables8' class="eight" style="font-size: 50px; text-align:center;" onclick="this.style.backgroundColor = '#045d99';asasa=8; player_turn();"></td>
    <td id='tables9' class="nine" style="font-size: 50px; text-align:center;" onclick="this.style.backgroundColor = '#045d99';asasa=9; player_turn();"></td>
    </tr>
    
    
    
    
    
    <script type="text/javascript">
    asasa=0;
    function player_turn()
    {
    
    if (document.getElementById('tables1').className == 'one' & asasa==1)  
    {
    document.getElementById('tables1').className = 'none'
    
    alert("Bot turn")
    	end_game=end_game+1;
    
    bot_turn()
    }
    
    else if (document.getElementById('tables2').className == 'two' && asasa==2)  
    {
    document.getElementById('tables2').className = 'none'
    
    alert("Bot turn")
    	end_game=end_game+1;
    
    bot_turn()
    }
    
    else if (document.getElementById('tables3').className == 'three' && asasa==3)  
    {
    document.getElementById('tables3').className = 'none'
    
    alert("Bot turn")
    	end_game=end_game+1;
    
    bot_turn()
    }
    
    else if (document.getElementById('tables4').className == 'four' && asasa==4)  
    {
    document.getElementById('tables4').className = 'none'
    
    alert("Bot turn")
    	end_game=end_game+1;
    
    bot_turn()
    }
    
    else if (document.getElementById('tables5').className == 'five' && asasa==5)  
    {
    document.getElementById('tables5').className = 'none'
    
    alert("Bot turn")
    	end_game=end_game+1;
    
    bot_turn()
    }
    
    else if (document.getElementById('tables6').className == 'six' && asasa==6)  
    {
    document.getElementById('tables6').className = 'none'
    
    alert("Bot turn")
    	end_game=end_game+1;
    
    bot_turn()
    }
    
    else if (document.getElementById('tables7').className == 'seven' && asasa==7)  
    {
    document.getElementById('tables7').className = 'none'
    
    alert("Bot turn")
    	end_game=end_game+1;
    
    bot_turn()
    }
    
    else if (document.getElementById('tables8').className == 'eight' && asasa==8)  
    {
    document.getElementById('tables8').className = 'none'
    
    alert("Bot turn")
    	end_game=end_game+1;
    
    bot_turn()
    }
    
    else if (document.getElementById('tables9').className == 'nine' && asasa==9)  
    {
    document.getElementById('tables9').className = 'none'
    
    alert("Bot turn")
    	end_game=end_game+1;
    
    bot_turn()
    }
    console.log(asasa)
    }
    
    
    
    
    
    
    var randomik=0;
    
    
    
    
    
    
    
    
    
    function bot_turn()
    {
    while (asass=0)
    {
    lal=0
    while (lal=0)
    {
    randomik=Math.floor((Math.random() * 9) + 1);
    console.log(randomik)
    
    
    if (randomik==1) 
    { 
    	if(document.getElementById('tables1').className == 'one')
    	{
    		document.getElementById('tables1').className = 'none'
            document.getElementById('tables1').style.backgroundColor = '#FF2400'
            alert("Player turn")
            lal=1
            end_game+=1
    	}
    	
    }
    
    else if (randomik==2) 
    { 
    	if(document.getElementById('tables2').className == 'two')
    	{
    		document.getElementById('tables2').className = 'none'
            document.getElementById('tables2').style.backgroundColor = '#FF2400'
            alert("Player turn")
            lal=1;
            end_game+=1
    	}
    
    
    }
    
    
    else if (randomik==3) 
    { 
    	if(document.getElementById('tables3').className == 'three')
    	{
    		document.getElementById('tables3').className = 'none'
            document.getElementById('tables3').style.backgroundColor = '#FF2400'
            alert("Player turn")
            lal=1;
            end_game+=1
    	}
    
    
    }
    
    
    else if (randomik==4) 
    { 
    	if(document.getElementById('tables4').className == 'four')
    	{
    		document.getElementById('tables4').className = 'none'
            document.getElementById('tables4').style.backgroundColor = '#FF2400'
            alert("Player turn")
            lal=1;
            end_game+=1
    	}
    
    }
    
    else if (randomik==5) 
    { 
    	if(document.getElementById('tables5').className == 'five')
    	{
    		document.getElementById('tables5').className = 'none'
            document.getElementById('tables5').style.backgroundColor = '#FF2400'
            alert("Player turn")
            lal=1;
            end_game+=1
    	}
    }
    
    else if (randomik==6) 
    { 
    	if(document.getElementById('tables6').className == 'six')
    	{
    		document.getElementById('tables6').className = 'none'
            document.getElementById('tables6').style.backgroundColor = '#FF2400'
            alert("Player turn")
            lal=1;
            end_game+=1
    	}
    }
    
    else if (randomik==7) 
    { 
    	if(document.getElementById('tables7').className == 'seven')
    	{
    		document.getElementById('tables7').className = 'none'
            document.getElementById('tables7').style.backgroundColor = '#FF2400'
            alert("Player turn")
            lal=1;
            end_game+=1
    	}
    }
    
    else if (randomik==8) 
    { 
    	if(document.getElementById('tables8').className == 'eight')
    	{
    		document.getElementById('tables8').className = 'none'
            document.getElementById('tables8').style.backgroundColor = '#FF2400'
            alert("Player turn")
            lal=1;
            end_game+=1
    	}
    
    
    }
    
    else if (randomik==9) 
    { 
    	if(document.getElementById('tables9').className == 'nine')
    	{
    		document.getElementById('tables9').className = 'none'
            document.getElementById('tables9').style.backgroundColor = '#FF2400'
            alert("Player turn")
            lal=1;
            end_game+=1
        }
    }
    else if (end_game==9)
    {
    	asass=1
    	alert('It works!')
    }
    }
    }
    }
    
    </script>
    </body>
    </html>

When i click bot must choose another cell where i hadnt click and paint it in red. When all cells are painted alert "It works!" should appear and random numbers in consol must stop generating.

