我的脚本在 Firefox 上运行良好，但在 google chrome 上运行失败

Question

我的脚本应该显示点击的卡片一和二。如果他们比较，他们应该都消失。如果他们没有见面，他们应该再次展示卡片背景。在谷歌上，第二张卡片不显示它的正面。即使两张卡都获得了类 .frontside 和要比较的正确值。这个问题只发生在谷歌浏览器上。在 Firefox 上，console.debugger 中也没有显示任何问题。 我将其设置为在线：[运行中的脚本][1]https://obs-design.de/index.php?design=1&mainmenu=games

有没有人看到这个错误？

这是脚本：

<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

在 Chrome 中，在成功添加“frontside”类之前会显示警报。你应该考虑使用 async/await https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

代替

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 {
        ...
    }
    ...
}

试试这样的

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 {
            ...
        }
        ...
    }
}