I am trying to add a \"replay\" feature to this JavaScript program, but I am str
ID: 3717233 • Letter: I
Question
I am trying to add a "replay" feature to this JavaScript program, but I am struggling. My program is a JavaScript version of the game memory(or Concentration). the code below is what I have thus far.
JavaScript code:
---------------------------
var dvcard = document.querySelector(".card");
function replayGame(){
}
//'flips' card when user clicks on div elements on page and invokes flipCard function
function flipCard(cDiv, cardValue){
//function flipCard has two arguements: cDiv and cardValue
if(cardValue){
var dvcard = document.getElementsByClassName('cardValue');
//span is added when div element is clicked
cDiv.innerHTML = '<span class = "cardValue" value = '+cardValue+'>'+cardValue+'<span>';
if(dvcard.length == 2){
//Removes cards if first selected card matches the second
if((dvcard[1].innerText) == (dvcard[0].innerText)){
//setTimeout(flipCard(), 1000);
while(dvcard.length > 0) {
dvcard[0].parentNode.remove();
}
}else{
while(dvcard.length > 0) {
dvcard[0].parentNode.removeChild(dvcard[0]);
}
}
}
}
}
------------------------
HTML Code:
------------------------
<html>
<head>
<title>Memory: A Game of Concentration</title>
</head>
<body>
<div>Flip a Card to Play</div>
<!---Pass numeric value when function is invoked -->
<div class="card" id="cardOne"></div>
<div class="card" id="cardTwo"></div>
<div class="card" id="cardThree"></div>
<div class="card" id="cardFour"></div>
<div class="card" id="cardFive"></div>
<div class="card" id="cardSix"></div>
<div class="card" id="cardSeven"></div>
<div class="card" id="cardEight"></div>
<div class="card" id="cardNine"></div>
<div class="card" id="cardTen"></div>
<div class="card" id="cardEleven"></div>
<div class="card" id="card-Twelve"></div>
<div class="card" id="cardThirteen"></div>
<div class="card" id="cardFourteen"></div>
<div class="card" id="cardFifteen"></div>
<div class="card" id="cardSixteen"></div>
<input class="Replaybutton" type ="button" value="Replay"/>
</body>
<!---<button>Replay</button>-->
<link href="style.css" rel="stylesheet" type="text/css"/>
<script src="app.js"></script>
</html>
------------------------------------
Explanation / Answer
// In HTML I've added text between <div></div> tags to make something visible to interact with.
------------------------
HTML Code:
------------------------
<html>
<head>
<title>Memory: A Game of Concentration</title>
</head>
<body>
<div>Flip a Card to Play</div>
<!---Pass numeric value when function is invoked -->
<div class="card" id="cardOne">Card One</div>
<div class="card" id="cardTwo">Card Two</div>
<div class="card" id="cardThree">Card Three</div>
<div class="card" id="cardFour">Card Four</div>
<div class="card" id="cardFive">Card Five</div>
<div class="card" id="cardSix">Card Six</div>
<div class="card" id="cardSeven">Card Seven</div>
<div class="card" id="cardEight">Card Eight</div>
<div class="card" id="cardNine">Card Nine</div>
<div class="card" id="cardTen">Card Ten</div>
<div class="card" id="cardEleven">Card Eleven</div>
<div class="card" id="card-Twelve">Card Twelve</div>
<div class="card" id="cardThirteen">Card Thirteen</div>
<div class="card" id="cardFourteen">Card Fourteen</div>
<div class="card" id="cardFifteen">Card Fifteen</div>
<div class="card" id="cardSixteen">Card Sixteen</div>
<input class="Replaybutton" type ="button" value="Replay"/>
</body>
<!---<button>Replay</button>-->
<link href="style.css" rel="stylesheet" type="text/css"/>
<script src="app.js"></script>
</html>
// Only two lines were required to make replay feature to work.
------------------------
JavaScript Code:
------------------------
var dvcard = document.querySelector(".card");
var body = document.body.innerHTML; // New added line 1
function replayGame(){
document.body.innerHTML = body; // New added line 2
}
//'flips' card when user clicks on div elements on page and invokes flipCard function
function flipCard(cDiv, cardValue){
//function flipCard has two arguements: cDiv and cardValue
if(cardValue){
var dvcard = document.getElementsByClassName('cardValue');
//span is added when div element is clicked
cDiv.innerHTML = '<span class = "cardValue" value = '+cardValue+'>'+cardValue+'<span>';
if(dvcard.length == 2){
//Removes cards if first selected card matches the second
if((dvcard[1].innerText) == (dvcard[0].innerText)){
//setTimeout(flipCard(), 1000);
while(dvcard.length > 0) {
dvcard[0].parentNode.remove();
}
}else{
while(dvcard.length > 0) {
dvcard[0].parentNode.removeChild(dvcard[0]);
}
}
}
}
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.