Issue with Memory Game: Every time I try to restart the game, it fails to work as expected

I've been working on creating a memory game where players need to match pairs of cards. The game functions correctly during the first round, but afterwards, if I click on a single card, it automatically gets matched. I've been struggling to find and fix this bug despite investing a significant amount of time into it. Any suggestions or help would be greatly appreciated. Thank you!

Check out my Memory Game on CodePen

let symbol = [
  "diamond",
  "paper-plane-o",
  "anchor",
  "bolt",
  "cube",
  "leaf",
  "bomb",
  "bicycle",
];
// more JavaScript code for the memory game goes here
// CSS styling for the memory game deck and score panel
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  // HTML structure for the memory game webpage
</head>

<body>

  <div class="container">
    <header>
      <h1>Memory Game</h1>
    </header>

    <section class="score-panel">
      // HTML content for displaying moves, timer, stars, and restart button
    </section>

    <ul class="deck"></ul>
  </div>

  <script src="[link to external library]"></script>
  <script src="js/app.js"></script>
</body>

</html>

Answer №1

Upon further examination, I discovered that I had neglected to remove the event listener from the deck. Consequently, each time the function to add the listener was called, a new event listener was being added, leading to duplicate matches occurring when a single card was clicked and pushed into the array twice.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Alert: Mouse Exiting Window - Moodle Prompt

I have created an online exam using the Moodle platform, coded in PHP. I am now looking for a way to prevent test-takers from navigating away from the test by implementing a mouseover pop-up. Below is the code I have for triggering an alert pop-up when th ...

Having trouble loading the jade view in express

I am having trouble with creating a jade view and loading it using express. The path / works fine, but when I try to load helloworld, the browser returns an error saying Cannot get /helloworld. This is the view I have created and saved in the views folder ...

The issue arises when the view fails to load while simulating a backend

Trying to test a specific element of the user interface requires a particular request to the backend with predefined data while allowing all other requests to pass through. Here's a more readable version in coffee script: describe 'select2 combo ...

Locate records in MongoDB using Node.js where a specific field contains identical elements as a given object

Here is an array of ids: [5, 7, 9, 4, 18] A collection contains documents inserted in the following format: db.collection('groups').insert( [ { members: [ {member: 5, hasSeen: false, requiresAction: true}, {member: ...

Each time the server restarts, Express.js will run a function asynchronously

Looking for guidance on implementing a function in my Express.js app that can fetch data from the database and then cache it into Redis. The goal is to have this function executed only upon restarting the Web server. Any suggestions on how I can achieve t ...

Submitting data using AJAX yields results, but the contact form remains untouched

I have created an online quiz using jQuery. My goal is to send the results, along with the user's contact information, to the moderator once they submit it. I have managed to send the result information successfully. However, I am facing an issue whe ...

Unpacking Objects in JavaScript and TypeScript: The Power of Destructuring

I have a variable called props. The type includes VariantTheme, VariantSize, VariantGradient, and React.DOMAttributes<HTMLOrSVGElement> Now I need to create another variable, let's name it htmlProps. I want to transfer the values from props to ...

C# - Implementing JavaScript Object manipulation in .NET Core

As I was browsing, I noticed many similar questions from years ago. Let's kick off this discussion with a simple JavaScript example showcasing how easy it is to modify, read, and write properties in objects using this language. Take a look at the cod ...

Tips for building an interactive button with changing content and retrieving variable information when the button is clicked in an Angular framework

Received dynamic data from the server is shown below: { "data": [ { "id": 4, "first_name": "Eve", "last_name": "Holt", "lat":"25.6599899", "lng":"45.3664646", "status":"0" ...

What is the best way to retrieve form input and select values using Angular Binding?

Just starting out with angular2, so please be patient with me. I realize this might be a beginner's question for some. <form> <label class="input-group"> <p>View By</p> <select [(ngModel)]="balance.viewBy" name="v ...

Is there a way to switch (transpose) the rows and columns of a dynamically generated HTML table from Highchair in Angular 12?

Click here to view the code for creating a highchart table. In the provided example, I have successfully implemented a highchart table using the code below. Highcharts.chart('container', { title: { text: 'Solar Employment Growth by Sec ...

The @Input() property within an Angular component is producing an empty array as its result

I have a calendar component that has a data property marked as @Input(): import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core'; @Component({ selector: 'app-calendar', templateUrl: './calendar.comp ...

The XMLHttpRequest function consistently comes back as undefined

Currently, I am working on the MDN tutorial about 'XMLHttpRequest'. Unfortunately, when trying to use request.open('GET', url) with a txt file from my local directory, it is returning undefined. I have checked both the url and request i ...

The ng-repeat directive successfully renders elements such as <p>, <ul><li>, and more, but encounters issues when used with a select element that has the same data source

A component of an application that generates a list of popular phone and tablet models based on the selection of a mobile operating system is displayed below: <div class="input-field col s3"> <label class="active">Environment ( ...

Is there a way for me to confirm that I am receiving the 401 error when fetching data?

When using an async function to fetch data, how can one determine if a 401 error occurred during the data retrieval process? The code example is as follows: async function getBilling(url, id, date) { let header = { method: 'GE ...

Showing the total number of duplicated items generated by using ng-repeat

I've been struggling to find a way to show the count of duplicate results when using the ng-repeat method. <label data-ng-repeat="x in projects | unique:'b' | orderBy:'b'" > <input id="x.b" type="checkbox" ...

Refresh the Vue page only once after it is mounted

Users should only experience the page refreshing once upon visiting. However, if I add location.reload() within the mounted() function, it causes an infinite loop of page reloads. ...

What is the best way to switch a single class using jQuery without impacting other elements with the same class

I'm in the process of implementing a commenting system similar to Reddit on my website. Each comment is equipped with a small button in the top right corner that allows users to collapse the comment. To achieve the collapsing effect, I am utilizing j ...

Is there a way to retrieve the current font size of highlighted text using JavaScript?

Currently, I am utilizing contenteditable on a div and am eager to include a button that will increase the font size of selected text. By "selected text," I mean any text highlighted by the cursor. To execute document.execCommand('fontsize&apos ...

Tips for applying stroke and shadow effects specifically when the mouse is moving over a canvas:

How can we create a shadow and stroke effect for circles drawn using HTML canvas only during mouse hover? I have two circles and would like to add a shadow and stroke effect when the mouse hovers over them. However, the issue is that once the mouse moves ...