硬币翻转HTML/Javascript

Question

我创建了硬币翻转，其中我们有两个方面来选择一个是全球另一个是财富。我用<form>和<select>，里面选择我已经添加了三个<option>

<option value="">Select Your Side</option> 
<option value="Global">Global</option> 
<option value="Fortune">Forutne</option> 

但之后，我选择例如全球和按钮翻转，然后如果我改回选项“选择你的一面”它仍然翻转......它不应该翻转它。对不起，我的英文不好：/

使用Javascript/jQuery代码：

// JavaScript Document 
// Resetting HTML after Result 
var result,userchoice; 
function resetAll(){ 
    var resetHTML = '<div class="tail"><img src="coin_F.png" /></div><div class="head"><img src="coin_G.png" /></div>'; 
    setTimeout(function(){ 
     $('.coinBox').fadeOut('slow',function(){ 
      $(this).html(resetHTML) 
     }).fadeIn('slow',function(){ 
      $('#btnFlip').removeAttr('disabled'); 
     }); 
    },2500); 
} 
// Checking User Input 
$(document).on('change','#userChoice', function(){ 
    userchoice = $(this).val(); 
    if(userchoice == "") { 
     $(this).parent('p').prepend("<span class='text text-danger'>Please select a coin side to play the game</span>") 
     $('#btnFlip').attr('disabled','disabled'); 
    } else { 
     /**/ 
     $('#btnFlip').removeAttr('disabled'); 
     $(this).siblings('span').empty(); 
    } 
    return userchoice; 
}); 
// Final result declaration 
function finalResult(result,userchoice){ 
    var resFormat = '<h3>'; 
    resFormat += '<span class="text text-primary">You choose : <u>'+userchoice+'</u></span> |'; 
    resFormat += '<span class="text text-danger"> Result : <u>'+result+'</u></span>'; 
    resFormat += '</h3>'; 
    var winr = '<h2 class="text text-success" style="color: #49DF3E;">You Won!!</h2>'; 
    var losr = '<h2 class="text text-danger" style="color: #c34f4f;">You Lost...</h2>'; 
    if(result == userchoice){ 
     $('.coinBox').append(resFormat+winr) 
    } else{ 
     $('.coinBox').append(resFormat+losr) 
    } 
} 
// Button Click Actions 
$(document).on('click','#btnFlip',function() { 
    var flipr = $('.coinBox>div').addClass('flip'); 
    var number = Math.floor(Math.random()*2); 
    $(this).attr('disabled','disabled'); 
    setTimeout(function() { 
     flipr.removeClass('flip'); 
     //result time 
     if(number) { 
      result = 'Global'; 
     //alert('Head = '+number); 
      $('.coinBox').html('<img src="coin_G.png" /><h3 class="text-primary">Global</h3>'); 
      finalResult(result,userchoice); 
      resetAll(); 
     } else { 
      result = 'Fortune'; 
     //alert('Tail = '+number); 
      $('.coinBox').html('<img src="coin_F.png" /><h3 class="text-primary">Fortune</h3>'); 
      finalResult(result,userchoice); 
      resetAll(); 
     } 
    },2000); 
    return false; 
}); 

#wrapper 
{ 
    width: 100%; 
    height: auto; 
    min-height: 500px; 
} 

.btn 
{ 
    width: 12%; 
    background-color: #c34f4f; 
    color: white; 
    padding: 14px 20px; 
    border: none; 
    border-radius: 4px; 
    cursor: pointer; 
    font-size: 22px; 
} 

.btn:hover 
{ 
    background-color: #A64242; 
} 

input[type=submit]:hover { 
    background-color: #A64242; 
} 

.container 
{ 
    padding: 50px 0; 
    text-align: center; 
} 

h1 
{ 
    margin-bottom: 100px; 
} 

.head 
{ 
    margin-top: -205px; 
} 

.flip img{animation: flipIt 0.5s linear infinite;} 
.head img 
{ 
    animation-delay: 0.25s; 
} 

@keyframes flipIt 
{ 
    0%{width: 0px; 
     height: 200px;} 
    25%{width: 200px; 
     height: 200px;} 
    50%{width: 0px; 
     height: 200px;} 
    100%{width: 0px; 
     height: 200px;} 
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="wrapper"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-12"> 
       <h1>Coin Flip | <span>Global or Fortune</span></h1> 
      </div> 
      <div class="col-lg-12"> 
       <!--blank--> 
       <div class="col-lg-4"></div> 
       <!--coin--> 
       <div class="col-lg-4"> 
        <div class="coinBox"> 
         <div class="tail"> 
          <img src="coin_F.png" /> 
         </div> 
         <div class="head"> 
          <img src="coin_G.png" /> 
         </div> 
        </div> 
       </div> 
       <!--user form elements--> 
       <div class="col-lg-4 text-left"> 
        <form> 
         <p> 
         <select class="form-control" id="userChoice"> 
          <option value="">Select Your Side</option> 
          <option value="Global">Global</option> 
          <option value="Fortune">Forutne</option> 
         </select> 
         </p> 
         <p> 
          <button class="btn btn-lg btn-primary" id="btnFlip" disabled>Flip It</button> 
         </p> 
        </form> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

你可以把按钮进行安全检查单击为好。这样，它会在触发点击之前始终检查。

$(document).on('click','#btnFlip',function() { 
    if($('#userChoice').val() == "") return; 
    var flipr = $('.coinBox>div').addClass('flip'); 

在这里看到的小提琴：https://jsfiddle.net/45t3th0n/