my script runs well on firefox but fail on google chrome

Question

my script should show the clicked cards one and two. If they compare they should dissapear both. If they dont met they should show the cards-background again. On Google the second card don't show it's frontside. Even if both card get the class .frontside and the right values to compare. This problem only happen on googles chrome. On Firefox there are also no no problems shown in the console.debugger. I set it online under: [script in action][1]https://obs-design.de/index.php?design=1&mainmenu=games

Is there anyone who sees the bug?

Here is the script:

<style>

.containerh1w1{
cursor: pointer;
}
.containerh1w1 img.backside,
.containerh1w1.backside img.backside{
     display:block;
     margin:auto auto;
     object-fit:cover;
     }
.containerh1w1 img.frontside,
.containerh1w1.backside img.frontside{
     display:none;
     }
.containerh1w1.frontside img.frontside{
     display:block;
     margin:auto auto;
     object-fit:cover;
     }
.containerh1w1.frontside img.backside{
     display:none;
     }
.containerh1w1.empty img.backside{
     display:none;
     }
.containerh1w1.empty img.frontside{
     display:none;
     }
#monitor{
     position:absolute;
     z-index:1100;
     top: 0;
     left:0;
     width:210px;
     height:20px; 
     background:#000;
     }
#timerwrapper,
#zugoverviewwrapper{
    float:left; 
    }
#timerwrapper span,
#zugoverviewwrapper span{
    display:inline;
    font-size:0.9rem;
    line-height:20px;
    color:#fff; 
    margin-right:10px;
    float:left;
    }
#timer{
    display:block;
    float:left;
    width:30px;
    height:20px;
    font-size:1rem;
    line-height:20px;
    color:#fff;
    text-align:center;
    padding: 0 auto;
    border:1px solid #fff;
    float:right;
    margin-right:15px;
}
#zugoverview{
    display:block;
    float:right;
    width:20px;
    height:20px;
    font-size:1rem;
    line-height:20px;
    color:#fff;
    border:1px solid #fff;
    text-align:center;
    }
</style>

<script>

shuffledarr = Array;
    var array =[2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 15, 21, 24, 30, 33, 39];
    var imgno='';

var zug = 0;
var treffer = 0;
    var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    var randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
    }

    var arr;
    shuffledarr = array;
    var sek = 0;

function sec(){
    sek = sek +1;
    document.querySelector('#timer').innerHTML=sek;
    }


function zuege(){
    zug += 1;
    return zug;
    }

function shufflel(no){
    imgno = shuffledarr[no];
    return imgno;
    }   
  
function dataauslesen(no){
    imgno = shuffledarr[no];
    document.querySelector('#field' +no).innerHTML='<img src="games/images/card_'+ imgno +'.gif"    id="bild + no" class="frontside">';
    console.log(shuffledarr);
    }


var firstchoice ='';
var secondchoice ='';
function front(no){
    var elem = document.querySelector('#field' +no);
    elem.classList.remove('backside');
    elem.classList.add('frontside');
    if(firstchoice==''){
        firstno = no;
        firstchoice =shufflel(no);
    } else {
        secondno = no;
        secondchoice = shufflel(no);
        zug = zug + 1;
        document.querySelector('#zugoverview').innerHTML=zug;
    
        if( 3*firstchoice == secondchoice || firstchoice == 3*secondchoice){
           alert("Gratuliere, Treffer");
           document.querySelector('#field'+firstno).classList.remove('backside');
           document.querySelector('#field'+firstno).classList.remove('frontside');
           document.querySelector('#field'+firstno).classList.add('empty');
           document.querySelector('#field'+secondno).classList.remove('backside');
           document.querySelector('#field'+secondno).classList.remove('frontside');
           document.querySelector('#field'+secondno).classList.add('empty');
           }
        else {
           alert("Schade, kein Treffer");
           document.querySelector('#field' +firstno).classList.remove('frontside');
           document.querySelector('#field' +firstno).classList.add('backside');
           document.querySelector('#field' +secondno).classList.remove('frontside');
           document.querySelector('#field' +secondno).classList.add('backside');    
           }

    firstchoice = '';
    firstno='';
    }
secondchoice = '';
secondno='';
}

</script>
<div id="monitor">
    <div id="timerwrapper">
        <span>Sek.:</span>
        <div id="timer"><script>setInterval(sec, 1000)</script></div>
    </div>
    <div id="zugoverviewwrapper">
        <span>Anzahl Zuege:</span>
        <div id="zugoverview"></div></div>
    </div>

<div id="mainwrapper">
    <div id="wrapper1">
        <div id="field0" class="containerh1w1" style="text-align:center;" onclick="front(0)">               
            <script>dataauslesen(0)</script>                            
            <img src="games/images/card_backsite.gif" class="backside" />
        </div>  
                
        <div id="field1" class="containerh1w1" style="text-align:center;" onclick="front(1)">                       
            <script>dataauslesen(1)</script>    
            <img src="games/images/card_backsite.gif" class="backside" />                       
        </div>  
                
        <div id="field2" class="containerh1w1" style="text-align:center;" onclick="front(2)">                                       
            <script>dataauslesen(2)</script>        
            <img src="games/images/card_backsite.gif" class="backside" />  
        </div>  
                
        <div id="field3" class="containerh1w1" style="text-align:center;" onclick="front(3)">                           
            <script>dataauslesen(3)</script>        
            <img src="games/images/card_backsite.gif" class="backside" />
        </div>  
                
        <div id="field4" class="containerh1w1" style="text-align:center;" onclick="front(4)">                                   
            <script>dataauslesen(4)</script>        
            <img src="games/images/card_backsite.gif" class="backside" /> 
        </div>  
                
        <div id="field5" class="containerh1w1" style="text-align:center;" onclick="front(5)">                                   
            <script>dataauslesen(5)</script>        
            <img src="games/images/card_backsite.gif" class="backside" />
        </div>      
                
        <div id="field6" class="containerh1w1" style="text-align:center;" onclick="front(6)">                   
            <script>dataauslesen(6)</script>        
             <img src="games/images/card_backsite.gif" class="backside" />
        </div>  
                
        <div id="field7" class="containerh1w1" style="text-align:center;"  onclick="front(7)">                  
            <script>dataauslesen(7)</script>        
             <img src="games/images/card_backsite.gif" class="backside" />
        </div>  
                
        <div id="field8" class="containerh1w1" style="text-align:center;" onclick="front(8)">                    
            <script>dataauslesen(8)</script> 
            <img src="games/images/card_backsite.gif" class="backside" />       
        </div>      
                
    </div>

    <div id="wrapper2">     
    
        <div id="field9" class="containerh1w1" style="text-align:center;" onclick="front(9)">       
            <script>dataauslesen(9)</script>
            <img src="games/images/card_backsite.gif" class="backside" />       
        </div>      
                
        <div id="field10" class="containerh1w1" style="text-align:center;" onclick="front(10)">           
            <script>dataauslesen(10)</script>       
            <img src="games/images/card_backsite.gif" class="backside" />
        </div>  
                
        <div id="field11" class="containerh1w1" style="text-align:center;" onclick="front(11)">          
            <script>dataauslesen(11)</script>       
            <img src="games/images/card_backsite.gif" class="backside" />
        </div>      
                
        <div id="field12" class="containerh1w1" style="text-align:center;" onclick="front(12)">          
            <script>dataauslesen(12)</script>       
            <img src="games/images/card_backsite.gif" class="backside" />
        </div>  
                
        <div id="field13" class="containerh1w1" style="text-align:center;" onclick="front(13)">          
            <script>dataauslesen(13)</script>       
            <img src="games/images/card_backsite.gif" class="backside" />
        </div>  
                
        <div id="field14" class="containerh1w1" style="text-align:center;" onclick="front(14)">          
            <script>dataauslesen(14)</script>       
             <img src="games/images/card_backsite.gif" class="backside" />
        </div>      
                
        <div id="field15" class="containerh1w1" style="text-align:center;" onclick="front(15)">          
            <script>dataauslesen(15)</script>       
            <img src="games/images/card_backsite.gif" class="backside" />
        </div>  
                    
        <div id="field16" class="containerh1w1" style="text-align:center;" onclick="front(16)">         
            <script>dataauslesen(16)</script>       
            <img src="games/images/card_backsite.gif" class="backside" />
        </div>  
                
        <div id="field17" class="containerh1w1" style="text-align:center;" onclick="front(17)">          
            <script>dataauslesen(17)</script>   
            <img src="games/images/card_backsite.gif" class="backside" />
        </div>      
    </div>
</div>

Answer 1

In Chrome, the Alert is being displayed before the "frontside" class is successfully added. You should consider using async/await https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

Instead of

function front(no){
    
    var elem = document.querySelector('#field' +no);    
    elem.classList.remove('backside');
    elem.classList.add('frontside');
    if(firstchoice==''){
        firstno = no;
        firstchoice =shufflel(no);
    } else {
        ...
    }
    ...
}

Try something like this

function front(no){
    evaluatePairs();        
    ...
}

function updateClasses() {
  return new Promise(() => {
    var elem = document.querySelector('#field' +no);    
    elem.classList.remove('backside');
    elem.classList.add('frontside');
  });
}

async function evaluatePairs() {
    const result = await updateClasses();
    if (result) {
        if(firstchoice==''){
            firstno = no;
            firstchoice =shufflel(no);
        } else {
            ...
        }
        ...
    }
}