I am encountering an issue where I am unable to view the page when running on the local server

Whenever I attempt to run my code on a local server, my laptop slows down and heats up, causing the page not to display correctly.

https://i.sstatic.net/V1eoS.jpg

The source code resembles an infinite loop but I am unable to identify the issue.

deck.addEventListener('click', event => {
  const clickTarget = event.target;

  if (clickTarget.classList.contains('card') &&
    !clickTarget.classList.contains('match') && toggledCards.length < 2 &&
    !toggledCards.includes(clickTarget)) {
    toggleCard(clickTarget);
    addToggleCard(clickTarget);
    if (toggledCards.length === 2) {
      checkForMatch(clickTarget);
    }
  }
});

Answer №1

Most often, when the CPU goes into overdrive and that pop-up appears, it's due to an endless loop.

Chances are, one of the functions being called triggers a click action somewhere. To prevent this, you'll need to debug the functions as suggested by @dustytrash.

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

Could someone please assist me with an issue I am experiencing with an AJAX GET request?

My code is not fetching any data for me. Below is the code snippet: <script type="text/javascript"> function matriculaFn(mat) { $.ajax({ method: 'GET', url:'My url API, async: true, crossDomain: false, contentType: 'application/j ...

How can I implement time-based login authentication for users in asp.net core using active code?

I am looking for a system where a unique code is sent to the user, allowing them to log in within a 3-minute window. The code should only be usable once during this time frame to prevent multiple requests by the user. ...

What is the best way to compare a collection of items found online with those stored on your device?

Despite numerous tutorials, I am still struggling to grasp this concept. To practice, I am currently working on where I am attempting to retrieve a list of elements and compare it to another list to ensure accuracy. I plan to do the same after sorting fro ...

"Using Three.js GLTF, switch the material of one object to match the material of

Recently, I encountered an interesting challenge with a scene imported from a glb-file using GLTFLoader. The scene features various objects of guys in different colors, each with its own material (RedMat, BlueMat, GreenMat, etc) created in Blender. Interes ...

Update the image source when hovering over the parent element

Check out this snippet of HTML code: <div class="custom text-center threeBox ofsted"> <a class="ofsted" title="ofsted report" href="http://reports.ofsted.gov.uk/"> <img class="text-center ofstedLogo" src="images/ofsted_good_transparen ...

Tips for making sure the Button component in material-ui consistently gives the same ID value for onClick events

Issue arises when trying to log the ID of the Button component, as it only logs correctly when clicked on the edges of the button (outside the containing class with the button label). This problem is not present in a regular JavaScript button where text is ...

The functionality of datepicker is not available in Bootstrap 4.1

Currently, I am developing a website at this domain. In this project, I aim to display a calendar when the user clicks on a search input box. This is the HTML code snippet I have implemented for the input boxes: <div class="dates"> <div class ...

Show me a list of all the commands my bot has in discord.js

Recently, I developed a Discord bot using discord.js and attempted to create a help command that would display all available commands to the user. For example, one of the commands is avatar.js module.exports.run = async(bot, message, args) => { le ...

What techniques can I employ to ensure that withLatestFrom() effectively interacts with itself?

In my program, I have an intermediate stream that is connected to a source, but it can also trigger events from other sources (such as user input). In another part of my code, there is a derived stream that needs to compare new data from the intermediate w ...

Display the values of dimpled JavaScript in a bar chart located externally from the chart

I am having trouble with the placement of bar chart values on the y-axis (cost) in my dimple js bar chart. The values are appearing outside of the chart, possibly due to an issue with the x-axis scale. Any ideas on how to fix this? Check out the jsfiddle ...

exclude properties with different values in an array

const myArray = [ { status: null }, { rooms: 2 }, { bathrooms: 3 }, { vaccum: null } ] I am working with the above array and I need to filter out any objects that have a property value of null, regardless of what the property is. Because the properties i ...

Struggling to incorporate pagination with axios in my code

As a newcomer to the world of REACT, I am currently delving into the realm of implementing pagination in my React project using axios. The API that I am utilizing (swapi.dev) boasts a total of 87 characters. Upon submitting a GET request with , only 10 cha ...

In Vue.js, utilize a contenteditable div to dynamically add an HTML element and bind it with v-model

Below is the HTML code I have written. <div id="app"> <button @click="renderHtml">Click to append html</button> <div class="flex"> <div class="message" @input="fakeVmodel" v-html="html" contenteditable="true">< ...

Encountering an issue with TS / yarn where an exported const object cannot be utilized in a consuming

I am currently working on a private project using TypeScript and Yarn. In this project, I have developed a package that is meant to be utilized by one or more other applications. However, as I started to work on the consumer application, I encountered an ...

The value of NUMBER_VALUE cannot be transformed into a String while trying to update the Item

I've encountered a strange issue with DynamoDB where I'm unable to update an item. Below is the command I'm using: TableName: 'UserTable', Key: { UID: { S: 'h4XJj3YRxZiF7TDcGkxAhc' } }, UpdateExpression: 'SET numRat ...

Sending information from a Bootstrap modal form

I'm experiencing an issue with my form that triggers a modal for confirmation before submission. The modal contains the submit button and is located outside of the <form> tag. Surprisingly, it works perfectly fine on all browsers except for Inte ...

Export multiple files from a ZIP archive on Android

I recently downloaded a large zip file from the internet and now I am looking for ways to speed up the extraction process to my app's storage. While I know about using bulk insert for SQLite Databases, I am curious if there is a similar method for imp ...

It seems that although both axios.put methods are identical, only one is functioning properly

Could someone clarify the distinction between these two syntaxes and why the first one is not functioning correctly? Attempting to use the first code block results in a 401 error: const handleSubmit = () => { axios.put(`url`, { headers: { Aut ...

Using Python and Selenium to verify an image with execute_script

Is there a way to verify the presence of an image on a webpage using Selenium in Python? Let's say we want to check if the logo is displayed in the upper left corner of the page. Here is the code snippet I use, involving the execute_script method: de ...

Having trouble dealing with the response following $resource.save in AngularJS, specifically expecting JSON data

Hi there, thank you so much for your help! I'm just starting out with Angular and I'm facing some challenges trying to consume data from an API for my application. The main issue I'm encountering is related to CORS: In order to run a local ...