ボタンクリック時のページリフレッシュを防止する方法

Question

私のコインフリップで助けが必要です。基本的には、2つのボタンを作成することです。そのうちの1つを押すことで、プレイヤーは側面を選択します（例えば、グローバルまたはフォーチュン）。

私はそれを行う方法を理解できません。プレイヤーがボタンを押すと、実際にサイトをリフレッシュせずにサイドを選択します。

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() { 
 
    if ($('#userChoice').val() == "") return; 
 
    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"> 
 
      <p> 
 
      <div class="form-control"> 
 
       <button name="Global" id="userChoice">Global</button> 
 
       <button name="Fortune" id="userChoice">Fortune</button> 
 
      </div> 
 
      <p> 
 
       <button class="btn btn-lg btn-primary" id="btnFlip" disabled>Flip It</button> 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

このような何か試してみてください：

HTMLを

<div class="choices"> 
    <button name="Heads">Heads</button> 
    <button name="Tails">Tails</button> 
    <p>You have chosen: <span class="choice"></span></p> 
</div> 

<div class="flip"> 
    <button class="disabled">Flip Coin</button> 
    <p></p> 
</div> 

CSS

.flip button { 
    background: #cc0000; 
    color: #fff; 
    padding: 5px; 
} 

.flip button.disabled { 
    cursor: not-allowed; 
    background: #ccc; 
    color: #eee; 
} 

JS

$(function() { 

    $(".choices button").on("click", function() { 
    var choice = $(this).attr("name"); 

    //show selected choice 
    $(".choice").text(choice); 

    //enable flip button 
    $(".flip button").removeClass("disabled"); 
    }); 

    $(".flip button").on("click", function() { 
    //flip coin if a choice has been made 
    if(!$(this).hasClass("disabled")) { 
     //get random number 
     var flip = Math.floor(Math.random() * 2) + 1; 

     //determine side of coin and result of guess (ternary) 
     var flipSide = flip == 1 ? "Heads" : "Tails"; 
     var result = flipSide == $(".choice").text() ? "correct" : "wrong"; 

     //show flip result 
     $(".flip p").text(flipSide + ", you chose " + result); 
    } 
    }); 

}); 

また、ここで働いて、それを表示することができます。https://jsfiddle.net/8jw1ogLd/