i am trying to display a modal based on a number of matched cards in a memory game.
i have already set var to be
let matchedCards = document.querySelectorAll('.match');
and then checking if matchedCards.length == 4 display a a modal (function) but I am unable to even enter that function for some reason.
// function to intialise game
function initGame() {
//set initial timer value
timer.innerHTML = '0 mins 0 secs';
//set initial star rating
for (var i = 0; i < stars.length; i++) {
stars[i].style.color = "#FFD700";
stars[i].style.visibility = "visible";
}
//deck selection and populating with generated card
let deck = document.querySelector('.deck');
let cardHTML = shuffle(cards).map(function(card) {
return generatedCard(card);
});
deck.innerHTML = cardHTML.join('');
allCards = document.querySelectorAll('.card');
//card function
allCards.forEach(function(card) {
card.addEventListener('click', function(e) {
openCards.push(card);
card.classList.add('open', 'show', 'disabled');
// setting move counter and matched/unmatched cards
if (openCards.length === 2) {
movesCounter();
if (openCards[0].dataset.card === openCards[1].dataset.card) {
matched();
} else {
unmatched();
}
} else {
allMatched();
}
})
});
};
//function for all matched
function allMatched() {
let matchedCards = document.querySelectorAll('.match');
if (matchedCards.length === 4) {
console.log(fourcards);
congratulations();
}
}
// match the 2 cards that are open if they are of the same type
function matched() {
openCards[0].classList.add("match", "disabled");
openCards[1].classList.add("match", "disabled");
openCards = [];
}
expecting to see the congrats modal popup if there are 4 matched cards on the deck.
Related
I used the same algorithm for an earlier part of the code, used a basic de-bouncer on the functions, and it worked, like so:
var lastClick = 0;
var delay = 20;
function l_mage_menu(){
if (lastClick >= (Date.now() - delay))
return;
lastClick = Date.now()
But for this it refuses to work and everything is running 3+ times, whether it's the alert window or the function being called. Cannot for the life of me figure out why.
document.addEventListener("DOMContentLoaded", (function(event) {
var buttons = document.querySelectorAll('.btn');//this acts like an array
if (buttons){
buttons.forEach(function getIndex(curVal2, LIndex2){ //current value and index in the list
curVal2.addEventListener('click', function() {
curVal2.classList.toggle("active2");
buttons.forEach(function(x, sL2){
if(LIndex2 !== sL2) { //if list index is NOT equal to the selected list element, aka one has already been picked
x.classList.remove('active2');
};
current_index2 = LIndex2;
switch(current_index2){
case(0): //basic attack.
console.log("test1") //from here, call the menus
break;
case(1): //this one is spells
//use listener to execute the matching spell
let btn1 = document.getElementById("btn_1");
btn1.addEventListener("click", function(){
if(btn1.innerHTML == "Supreme Altar"){
let ultima = document.getElementById('ultima_charge');
if (ultima.value != 100){
window.alert("Ultima not charged!");
}else{
SupremeAltar()
}
}
else if (btn1.innerHTML == "Radiant Supernova"){
let ultima = document.getElementById('ultima_charge');
if (ultima.value != 100){
window.alert("Ultima not charged!");
}else{
RadiantSupernova()
}
}else if (btn1.innerHTML == "Thousand Men"){
let ultima = document.getElementById('ultima_charge');
if (ultima.value != 100){
window.alert("Ultima not charged!");
}else{
ThousandMen()
};
};
})
};
});
});
});
};
}));
I have a small problem that could ruin the game. Once you click a card you need to search for the other card with the same picture right? but the problem is you can also double click and it will think you found the other card. Anyone know how o solf this problem?
const cards = document.querySelectorAll(".cards .card");
cards.forEach((card) => {
card.addEventListener("click", () => {
card.classList.add("clicked");
if (counter === 0) {
firstSelection = card.getAttribute("meme");
counter++;
} else {
secondSelection = card.getAttribute("meme");
counter = 0;
if (firstSelection === secondSelection) {
const correctCards = document.querySelectorAll(".card[meme='" + firstSelection + "']");
score.innerHTML = parseInt(score.innerHTML) + 1
if (score.innerHTML >= 8)
correctCards[0].classList.add("checked");
correctCards[0].classList.remove("clicked");
correctCards[1].classList.add("checked");
correctCards[1].classList.remove("clicked");
} else {
const incorrectCards = document.querySelectorAll(".card.clicked");
incorrectCards[0].classList.add("red");
incorrectCards[1].classList.add("red");
setTimeout(() => {
incorrectCards[0].classList.remove("red");
incorrectCards[0].classList.remove("clicked");
incorrectCards[1].classList.remove("red");
incorrectCards[1].classList.remove("clicked");
}, 600);
}
}
});
});
You can set 2 global vars firstClickedCard and secondClickedCard, and on click, assign the card element (event.currentTarget) to these variables. Then on second click, check if (secondClickedCard === firstClickedCard) before any of your other logic, and reject the click event if this is true.
This should verify if the actual clicked element (not just the meme attribute) are the same or not.
Note: this is untested, and would be easier to verify if your question included a minimal, reproducible example.
const cards = document.querySelectorAll(".cards .card");
var firstClickedCard;
var secondClickedCard;
cards.forEach((card) => {
card.addEventListener("click", (e) => {
card.classList.add("clicked");
if (counter === 0) {
firstClickedCard = e.currentTarget;
firstSelection = card.getAttribute("meme");
counter++;
} else {
secondClickedCard = e.currentTarget;
// reject this click
if (secondClickedCard === firstClickedCard) {
secondClickedCard = null;
return false;
}
secondSelection = card.getAttribute("meme");
counter = 0;
if (firstSelection === secondSelection) {
const correctCards = document.querySelectorAll(".card[meme='" + firstSelection + "']");
score.innerHTML = parseInt(score.innerHTML) + 1
if (score.innerHTML >= 8)
correctCards[0].classList.add("checked");
correctCards[0].classList.remove("clicked");
correctCards[1].classList.add("checked");
correctCards[1].classList.remove("clicked");
} else {
const incorrectCards = document.querySelectorAll(".card.clicked");
incorrectCards[0].classList.add("red");
incorrectCards[1].classList.add("red");
setTimeout(() => {
incorrectCards[0].classList.remove("red");
incorrectCards[0].classList.remove("clicked");
incorrectCards[1].classList.remove("red");
incorrectCards[1].classList.remove("clicked");
}, 600);
}
}
});
});
Although there is a double click event (dblclick), it is not supported by all browsers. The way around this is to test for double clicks within your click event handlers and use a timer function (to see if two clicks happened within a select amount of time). I use 300ms for the timer, but you may have to play around with that a bit.
const cards = document.querySelectorAll(".cards .card");
let clickCount = 0;
cards.forEach((card) => {
card.addEventListener("click", () => {
clickCount ++;
if (clickCount == 1) {
clickTimer = setTimeout(() => {
clickCount = 0;
//single click functionality here
card.classList.add("clicked");
if (counter === 0) {
firstSelection = card.getAttribute("meme");
counter++;
} else {
secondSelection = card.getAttribute("meme");
counter = 0;
if (firstSelection === secondSelection) {
const correctCards = document.querySelectorAll(".card[meme='" + firstSelection + "']");
score.innerHTML = parseInt(score.innerHTML) + 1
if (score.innerHTML >= 8)
correctCards[0].classList.add("checked");
correctCards[0].classList.remove("clicked");
correctCards[1].classList.add("checked");
correctCards[1].classList.remove("clicked");
} else {
const incorrectCards = document.querySelectorAll(".card.clicked");
incorrectCards[0].classList.add("red");
incorrectCards[1].classList.add("red");
setTimeout(() => {
incorrectCards[0].classList.remove("red");
incorrectCards[0].classList.remove("clicked");
incorrectCards[1].classList.remove("red");
incorrectCards[1].classList.remove("clicked");
}, 600);
}
}
}, 300);
} else if (clickCount == 2) {
clearTimeout(clickTimer);
clickCount = 0;
console.log("This was a double click!");
}
});
});
I am making a quiz. How would I be able to make the user, after they answer the question by clicking a button in the multiple choice answer, move onto the next question in the same container div?
function runQuizQuestions() {
// shuffling questions
let theQuestions = shuffle(myQuestions);
console.log('shuffled Questions');
for (let i = 0; i < myQuestions.length; i++) {
// fill in the questions HTML
document.querySelector('#quizQ').innerText = myQuestions[i].question;
document.querySelector('#a1').innerText = myQuestions[i].answer1;
document.querySelector('#a2').innerText = myQuestions[i].answer2;
document.querySelector('#a3').innerText = myQuestions[i].answer3;
document.querySelector('#a4').innerText = myQuestions[i].answer4;
// store correct answer
rightAnswer = myQuestions[i].correct;
// clicking inside the container
let quizContainer = document.querySelector('#quiz');
quizContainer.addEventListener("click", function (event) {
event.preventDefault;
let answerClick = event.target;
console.log(`you clicked on:`, answerClick);
if (answerClick.matches("button")) {
// store button's value
let answer = answerClick.innerText;
// check answer
if (answer === rightAnswer) {
document.querySelector('#result').innerText = "Correct!";
document.querySelector('#result').classList.remove('d-none', 'alert-danger');
setTimeout(function () { document.querySelector('#result').classList.add('d-none', 'alert-danger'); }, 2000);
console.log('right answer');
} else {
document.querySelector('#result').innerText = "Wrong!";
document.querySelector('#result').classList.remove('d-none', 'alert-success');
setTimeout(function () { document.querySelector('#result').classList.add('d-none', 'alert-success'); }, 2000);
console.log('wrong answer');
}
}
// move on to next question.
})
}
I'm trying to find out how to make the amount of likes stay on the page when it's reloaded. Any pieces of code to help me make that happen?
var count = 0;
function clickFunc() {
count += 1;
var click = document.getElementById('clicks').innerHTML = count;
var btn = document.querySelector('.btn');
if(count >= 1)
btn.disabled = true;
}
You could write a solution using localStorage. Here is an example below. Ensure that the checkStorage() method is called on document ready so that the count is added to the DOM if it isn't there already.
//Run on Document Ready
function checkStorage() {
if(!localStorage.getItem("count")){
localStorage.setItem("count",0);
} else {
let stored = parseInt(localStorage.getItem("count"));
console.log('Storage Exists');
var click = document.getElementById('clicks').innerHTML = stored;
var btn = document.querySelector('.btn');
if(stored >= 1) {
btn.disabled = true;
}
}
}
//Run Button Click
function clickFunc() {
let stored = parseInt(localStorage.getItem("count"));
stored++
localStorage.setItem("count",stored);
var click = document.getElementById('clicks').innerHTML = stored;
var btn = document.querySelector('.btn');
if(stored >= 1) {
btn.disabled = true;
}
}
The 'Win' and 'Draw' parts are showing up on time, but the 'Lost' part doesn't show the message 'you lost'until I click on an empty cell once again. Please check out my code and help me find any errors.
Below is my code:
Marked is a class that changes the opacity of the clicked cell.
1,2,3...are the id's of respective cells in the table(html).
I tried delay() too instead of setTimeout(), but it didn't work as well.
$(document).ready(function() {
var timer;
var x = 0;
$("td").click(function() {
if($(this).text()=='') {
$(this).text("0").addClass("marked");
x = 1;
}
}).click(function() {
if(x==1) {
timer = setTimeout(function() {
var choose = $("td").not(".marked");
var random = choose[Math.floor(Math.random()*choose.length)];
$(random).text("X").addClass("marked");
},1000);
x=0;
showResult();
}
});
function showResult() {
var one = $("#1").text();
var two = $("#2").text();
var three = $("#3").text();
var four = $("#4").text();
var five = $("#5").text();
var six = $("#6").text();
var seven = $("#7").text();
var eight = $("#8").text();
var nine = $("#9").text();
if(one==two && two==three)
result(one)
else if (four==five && five==six)
result(four)
else if(seven==eight && eight==nine)
result(seven)
else if (one==four && four==seven)
result(one)
else if (two==five && five==eight)
result(two)
else if (three==six && six==nine)
result(three)
else if (one==five && five==nine)
result(one)
else if(three==five && five==seven)
result(three);
else {
var z = $("td").not(".marked");
if(z.length == 0) {
$("p").text("Draw!");
$("td").removeClass("marked");
$("td").text("");
$("#demo1").append('<img src="https://media.tenor.com/images/54c63f726505bfdb455eb4c29e626ad8/tenor.gif">');
clearTimeout(timer);
}
}
}
function result(y) {
var result = y;
if(result=="X"){
clearTimeout(timer);
$("p").text("You Lost!");
$("td").removeClass("marked");
$("td").text("");
$("#demo1").append('<img src="https://media.tenor.com/images/08902a85a6107684f8614846f4a54218/tenor.gif">');
}
if(result=="0") {
$("td").text("");
$("p").text("You Won!");
$("#demo1").append('<img src="https://i.gifer.com/4OuC.gif">');
$("td").removeClass("marked");
clearTimeout(timer);
}
}
});
You are calling showResult immeadiately when the user clicked, so it cant't recognize the X put into the table one second later.
Just do:
$("td").click(function() {
[...]
}).click(function() {
if (x == 1) {
timer = setTimeout(function() {
var choose = $("td").not(".marked");
var random = choose[Math.floor(Math.random() * choose.length)];
$(random).text("X").addClass("marked");
/******** ADD ANOTHER CHECK HERE ********/
showResult();
}, 1000);
x = 0;
showResult();
}
});
It might also be a good idea to add a return to showResult that returns false when a result was achieved. This way you could do something like
x = 0;
if (showResult()) {
timer = setTimeout(function() {
[...]
}
}
And the user can't get a loose message right after a win message.
Also: Why do you need the 2 click listeners? You can just use the if statement in the top one and then you don't need the (x == 1)