Random-Karte wird nur einmal generiert

-1

Ich versuche ein Kartenspiel zu erstellen, in dem jedes Mal, wenn ein Knopf angeklickt wird, eine Karte eine zufällige Karte enthüllt, aber das funktioniert nur einmal für den ersten Klick, danach nichts neu zu Codierung vor allem Javascript und trotz meiner besten Bemühungen kann ich nicht den Rest der Karten zu generieren. Ich bin mir sicher, dass es etwas einfaches ist. Jede Hilfe wäre fantastisch.Random-Karte wird nur einmal generiert

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

Quelle

2016-04-09 kingnarwal

Können Sie im Gegensatz zum Hinzufügen eines Links zu Ihrem Code bitte ein Codebeispiel in die Frage selbst einfügen? – Matthijs

Ja, wie @Matthijs darauf hinwies, (einschließlich Codebeispiel in der Frage selbst) wäre für zukünftige Besucher dieser Frage hilfreich, da sich Ihr Quellcode im Laufe der Zeit ändern wird, und zweitens gibt es keine Garantie, dass der Link sogar wird in der Zukunft aktiv sein. –

Vielen Dank, dass Sie sich die Zeit genommen haben, meine erste Frage zum Stack-Überlauf zu lesen. Ich werde sicherstellen, dass ich ein Codebeispiel mit meiner nächsten Frage einschließe. Danke für den Rat. – kingnarwal

Sie Randomisierung nur, wenn die JS-Datei geladen wird, eine Zeit, nicht auf Mausklick.

Quelle

2016-04-09 19:11:09 Paul

Fügen Sie den folgenden Teil zu Ihrer Js Datei:

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

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


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

Ich hoffe, das Ihnen hilft.

Quelle

2016-04-09 19:22:23

Ein großes Dankeschön dafür, sich die Zeit zu nehmen, um meine Frage zu betrachten. Es hat immer gefühlt, dass ich es lösen könnte und dass die Lösung ziemlich einfach sein muss. Manchmal ist der schwierigste Teil des Schreibens Code, Selbstzweifel nicht zu lassen Sie. – kingnarwal

Ein paar Probleme: zuerst verwenden Sie doppelte IDs (random_card_return.) Ich änderte sie zu einer Klasse. IDs müssen eindeutig sein. Ich musste dann zu Ihrer Elementselektoreinrichtung ändern:

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

den vollständigen Code Siehe unten, um zu sehen, wo ich die clickCounter Variable deklarieren und wo ich es erhöhen. Dies funktioniert, da Sie eine eindeutige ID für jede Karte haben (#card1, etc.) Einzige Sache ist, ich habe die erste Karte #card0 gemacht.

Als nächstes ist die random_number Sie generieren außerhalb der addEventListener Callback-Funktion, so dass es immer die gleiche Nummer mit jedem Klick sein wird. Es wurde in die Rückruffunktion verschoben, sodass es jedes Mal eine neue Nummer generiert.

Der Code könnte weiter verbessert werden von dem, was ich gepostet habe, zum Beispiel werden Sie eine Uncaught TypeError: Cannot read property 'classList' of null Fehler finden, wenn Sie durch alle Karten geklickt haben. Das kann leicht korrigiert werden, aber ich überlasse es Ihnen.

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>

By the way, vielleicht haben Sie einen Grund dafür, aber Sie jQuery in Ihrem HTML sind geladen und nicht in Ihrem Javascript.

Quelle

2016-04-09 20:02:03

Der Jquery Link in meinem HTML ist so lange da gewesen, dass ich fast vergessen hätte, dass ich irgendwann mal eine JQuery mit einbeziehen würde. Ein großes Dankeschön, dass Sie sich die Zeit genommen haben, meine Frage zu betrachten. – kingnarwal

Random-Karte wird nur einmal generiert

Antwort

Verwandte Themen