ランダムカードは一度だけ生成されます

-1

ボタンをクリックするたびにカードがランダムに表示されるカードゲームを作成しようとしていますが、これは最初のクリックでは一回しか動作しません。特にJavaScriptをコーディングするのは初めてです。私の最善の努力にもかかわらず、私は生成するカードの残りの部分を得ることができません。私はそれが何か簡単だと確信しています。ランダムカードは一度だけ生成されます

https://github.com/kingnarwal/Tv_Card_Game.git

出典

2016-04-09 kingnarwal

コードへのリンクを追加するのではなく、質問の中にコードサンプルを追加できますか？ – Matthijs

@Matthijs氏が指摘したように（質問自体のコードサンプルを含む）、あなたのソースコードが最初に変更されることになっているので、この質問への今後の訪問者に役立ちます。将来活発になります。 –

私の最初のスタックオーバーフローの問題を見ていただきありがとうございます。私は私の次の質問でコードサンプルを含めるようにします。アドバイスありがとうございます。 – kingnarwal

あなたが唯一のランダム化しているときではないクリック上の.jsファイルのロード、1時間、。

出典

2016-04-09 19:11:09 Paul

は、あなたの.jsファイルに次のパートを追加します。

var elementid = "button"; //Your Button-ID here 

var button = document.getElementById(elementid); 
button.onclick = function(){ 


//Your Random-Card-Generator-Code here 
}

私はこれがあなたを助け願っています。

出典

2016-04-09 19:22:23

私の質問を見る時間をとって大変感謝しています。私はそれを解決することができなければならず、解決策は非常にシンプルでなければならないと常に感じました。コードを書くのが最も難しい部分は、君は。 – kingnarwal

2つの問題：最初に重複ID（random_card_return）を使用しています。それらをクラスに変更しました。 IDは一意である必要があります。私はclickCounter変数を宣言し、私はそれをどこをインクリメント場所を確認するために

document.querySelector("#card" + clickCounter + " .random_card_return").innerHTML = (imageArray[random_number]);

は、以下の完全なコードを参照してください：私はその後にあなたの要素のセレクターを変更しなければなりませんでした。これは、あなたが各カード（#card1、等）の一意のIDを持っているので動作します。唯一のことは、最初のカード#card0を作ったことです。

次に、生成するrandom_numberはaddEventListenerコールバック関数の外にあるため、各クリックで常に同じ数字になります。毎回新しい番号を生成するように、コールバック関数の内部に移動しました。

コードは、私が投稿したものよりさらに改善することができます。たとえば、すべてのカードをクリックするとUncaught TypeError: Cannot read property 'classList' of nullエラーが発生します。これは簡単に修正できますが、私はあなたに任せます。ところで

JSFiddle DEMO

var clickCounter = 0; 
 

 
document.querySelector("#clickbtn").addEventListener("click", function(ev) { 
 
    var el = document.querySelector(".flip-card:nth-child(1):not(.flipped), .flip-card.flipped + .flip-card:not(.flipped)"); 
 
    var random_number = Math.floor(Math.random() * 50) + 1; 
 
    console.log(el); 
 
    el.classList.add("flipped"); 
 

 
document.querySelector("#card" + clickCounter + " .random_card_return").innerHTML = (imageArray[random_number]); 
 

 
// Increment clickCounter 
 
clickCounter++; 
 

 
}); 
 

 

 

 
var imageArray = [("<img src='http://s20.postimg.org/ideyyn00p/image01.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/qk6yq7q3d/image02.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/6e8252jtl/image03.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/4np13l2ah/image04.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/ad59nw8gp/image05.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/530awlo7t/image06.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/4ergdnpi1/image07.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/dntmnrye1/image08.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/4hbc0ht5l/image09.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/jrb77oont/image10.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/3ucfayw9l/image11.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/gn0jaw7vd/image12.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/tu47z0ont/image13.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/hgrds3yzd/image14.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/l1n9bc3ix/image15.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/l2x74r5cp/image16.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/5ipte7v89/image17.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/xy56rikm1/image18.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/yrmdxvg0p/image19.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/5hkgyjis9/image20.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/47mnjhp09/image21.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/6evhl5jo9/image22.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/r1k76h32x/image23.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/x51rqdtcp/image24.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/avnujtxw9/image25.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/makboga8p/image26.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/60u5ljzkp/image27.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/apf7duv2x/image28.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/4e9zxftuh/image29.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/ucdm3gzbt/image30.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/iojk8xa6x/image31.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/qvbk0i09l/image32.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/w9exlsfdl/image33.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/8kzfqiiu1/image34.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/uzh46qlll/image35.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/zb5pvqsih/image36.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/pf4mw3mqh/image37.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/w6v1yybq1/image38.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/xzxyn9wwp/image39.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/49fff91ax/image40.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/4ngreuleh/image41.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/7vl8rw7o9/image42.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/qp71ow5w9/image43.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/tkk4vr9w9/image44.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/9r8131wih/image45.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/8q7sdxfix/image46.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/o07nl4b15/image47.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/vu896iiu1/image48.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/7rrfbn26x/image49.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/src4gvt95/image50.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/ygsd16zfd/image51.png' width='154px' height='231px';>"), 
 
    ("<img src='http://s20.postimg.org/jyv5t7849/image52.png' width='154px' height='231px';>") 
 

 
];

h1 { 
 
    margin: 0; 
 
} 
 

 
.card-container { 
 
    -webkit-perspective: 700; 
 
    -ms-perspective: 700; 
 
    perspective: 700; 
 
} 
 

 
.flip-card.flipped { 
 
    -webkit-animation: card-flipper linear 0.5s; 
 
    animation: card-flipper linear 0.5s; 
 
    -webkit-transform: rotateY(180deg); 
 
    -ms-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
} 
 

 
@-webkit-keyframes card-flipper { 
 
    from { 
 
    -webkit-transform: rotateY(0deg); 
 
    transform: rotateY(0deg); 
 
    } 
 
    to { 
 
    -webkit-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
    } 
 
} 
 

 
@keyframes card-flipper { 
 
    from { 
 
    -webkit-transform: rotateY(0deg); 
 
    transform: rotateY(0deg); 
 
    } 
 
    to { 
 
    -webkit-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
    } 
 
} 
 

 
.back { 
 
    -webkit-transform: rotateY(180deg); 
 
    -ms-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
} 
 

 
.front, 
 
.back { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 154px; 
 
    height: 231px; 
 
    -webkit-backface-visibility: hidden; 
 
    -ms-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
} 
 

 
a { 
 
    position: absolute; 
 
    top: 650px; 
 
    left: 825px; 
 
    width: 160px; 
 
    height: 45px; 
 
    background: lightblue; 
 
} 
 

 
#card0 { 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 308px; 
 
} 
 

 
#card1 { 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 539px; 
 
} 
 

 
#card2 { 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 770px; 
 
} 
 

 
#card3 { 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 1004px; 
 
} 
 

 
#card4 { 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 1235px; 
 
} 
 

 
#card5 { 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 1466px; 
 
} 
 

 
#card6 { 
 
    position: absolute; 
 
    top: 408px; 
 
    left: 308px; 
 
} 
 

 
#card7 { 
 
    position: absolute; 
 
    top: 408px; 
 
    left: 539px; 
 
} 
 

 
#card8 { 
 
    position: absolute; 
 
    top: 408px; 
 
    left: 770px; 
 
} 
 

 
#card9 { 
 
    position: absolute; 
 
    top: 408px; 
 
    left: 1004px; 
 
} 
 

 
#card10 { 
 
    position: absolute; 
 
    top: 408px; 
 
    left: 1235px; 
 
} 
 

 
#card11 { 
 
    position: absolute; 
 
    top: 408px; 
 
    left: 1466px; 
 
} 
 

 
#card0, 
 
#card1, 
 
#card2, 
 
#card3, 
 
#card4, 
 
#card5, 
 
#card6, 
 
#card7, 
 
#card8, 
 
#card9, 
 
#card10, 
 
#card11 { 
 
    color: black; 
 
    text-align: center; 
 
    line-height: 160px; 
 
    width: 154px; 
 
    height: 231px; 
 
    border: 3px solid black; 
 
    border-radius: 7px; 
 
    -webkit-transition: all 0.6s ease; 
 
    transition: all 0.6s ease; 
 
    -webkit-transform-style: preserve-3d; 
 
    -ms-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
}

<div class="card-container"> 
 
    <div class="flip-card" id="card0"> 
 
    <div class="front"> 
 
     <img src='http://s20.postimg.org/w3afa6l09/b2fv.png' width='154px' height='231px' ;> 
 
    </div> 
 
    <div class="back"> 
 
     <div class="random_card_return"></div> 
 
    </div> 
 
    </div> 
 
    <div class="flip-card" id="card1"> 
 
    <div class="front"> 
 
     <img src='http://s20.postimg.org/w3afa6l09/b2fv.png' width='154px' height='231px' ;> 
 
    </div> 
 
    <div class="back"> 
 
     <div class="random_card_return"></div> 
 
    </div> 
 
    </div> 
 
    <div class="flip-card" id="card2"> 
 
    <div class="front"> 
 
     <img src='http://s20.postimg.org/w3afa6l09/b2fv.png' width='154px' height='231px' ;> 
 
    </div> 
 
    <div class="back"> 
 
     <div class="random_card_return"></div> 
 
    </div> 
 
    </div> 
 
    <div class="flip-card" id="card3"> 
 
    <div class="front"> 
 
     <img src='http://s20.postimg.org/w3afa6l09/b2fv.png' width='154px' height='231px' ;> 
 
    </div> 
 
    <div class="back"> 
 
     <div class="random_card_return"></div> 
 
    </div> 
 
    </div> 
 
    <div class="flip-card" id="card4"> 
 
    <div class="front"> 
 
     <img src='http://s20.postimg.org/w3afa6l09/b2fv.png' width='154px' height='231px' ;> 
 
    </div> 
 
    <div class="back"> 
 
     <div class="random_card_return"></div> 
 
    </div> 
 
    </div> 
 
    <div class="flip-card" id="card5"> 
 
    <div class="front"> 
 
     <img src='http://s20.postimg.org/w3afa6l09/b2fv.png' width='154px' height='231px' ;> 
 
    </div> 
 
    <div class="back"> 
 
     <div class="random_card_return"></div> 
 
    </div> 
 
    </div> 
 
    <div class="flip-card" id="card6"> 
 
    <div class="front"> 
 
     <img src='http://s20.postimg.org/w3afa6l09/b2fv.png' width='154px' height='231px' ;> 
 
    </div> 
 
    <div class="back"> 
 
     <div class="random_card_return"></div> 
 
    </div> 
 
    </div> 
 
    <div class="flip-card" id="card7"> 
 
    <div class="front"> 
 
     <img src='http://s20.postimg.org/w3afa6l09/b2fv.png' width='154px' height='231px' ;> 
 
    </div> 
 
    <div class="back"> 
 
     <div class="random_card_return"></div> 
 
    </div> 
 
    </div> 
 
    <div class="flip-card" id="card8"> 
 
    <div class="front"> 
 
     <img src='http://s20.postimg.org/w3afa6l09/b2fv.png' width='154px' height='231px' ;> 
 
    </div> 
 
    <div class="back"> 
 
     <div class="random_card_return"></div> 
 
    </div> 
 
    </div> 
 
    <div class="flip-card" id="card9"> 
 
    <div class="front"> 
 
     <img src='http://s20.postimg.org/w3afa6l09/b2fv.png' width='154px' height='231px' ;> 
 
    </div> 
 
    <div class="back"> 
 
     <div class="random_card_return"></div> 
 
    </div> 
 
    </div> 
 
    <div class="flip-card" id="card10"> 
 
    <div class="front"> 
 
     <img src='http://s20.postimg.org/w3afa6l09/b2fv.png' width='154px' height='231px' ;> 
 
    </div> 
 
    <div class="back"> 
 
     <div class="random_card_return"></div> 
 
    </div> 
 
    </div> 
 
    <div class="flip-card" id="card11"> 
 
    <div class="front"> 
 
     <img src='http://s20.postimg.org/w3afa6l09/b2fv.png' width='154px' height='231px' ;> 
 
    </div> 
 
    <div class="back"> 
 
     <div class="random_card_return"></div> 
 
    </div> 
 
    </div> 
 

 
</div> 
 

 
<a href="#card" id="clickbtn">Click Me</a>

、多分あなたはそれの理由を持っていますが、HTMLでのjQueryをロードして、JavaScriptでそれを使用していません。

出典

2016-04-09 20:02:03

私のhtmlのjqueryリンクは長い間私はほとんど私がいくつかのjqueryを含めるつもりだったと思って私はそれをチョップを与えるだろうと思った。私の質問を見る時間をとって大喜びです。 – kingnarwal

ランダムカードは一度だけ生成されます

答えて

関連する問題