minimize javascript syntax (stackoverflow 2022)

I'm struggling with this puzzle game. Sometimes, when I start a new game, the pieces get shuffled incorrectly. I tried adding a function to fix it, but it doesn't seem to be working. It's really frustrating and I want to simplify the code as well.

var count = 0;
var moves = 0;

var CheckArray = new Array(9);

function swapTiles(cell1, cell2) {
  var elem1 = document.getElementById(cell1),
    elem2 = document.getElementById(cell2);

  var tempClass = elem1.className;
  var tempText = elem1.textContent;

  elem1.className = elem2.className;

  elem1.textContent = elem2.textContent;
  elem2.className = tempClass;
  elem2.textContent = tempText; 
}


function shuffle() {
  for (var row = 1; row <= 3; row++) {
    for (var column = 1; column <= 3; column++) {
      var row2 = Math.floor(Math.random() * 3 + 1);
      var column2 = Math.floor(Math.random() * 3 + 1);

      swapTiles("cell" + row + column, "cell" + row2 + column2);
    }
  }
  Check();
}

//More functions and code here...
body {
  background: #6ca0e4c4;
}

.tile1,
.tile2,
.tile3,
.tile4,
.tile5,
.tile6,
.tile7,
.tile8,
.tile9 { 
 //CSS styles here... 
}
// HTML code omitted for brevity.

Answer №1

This approach should do the trick. Without knowing your specific requirements for the results, I have stored them in an array called cell_classes.

let cell_classes = [];

for(i = 1; i <= 4; i++){
  for(j = 1; j <= 4; j++){
    const tmp = document.getElementById("cell" + i + "" + j).getAttribute('class');

    cell_classes.push(tmp);
  }
}

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

Apache conf file configured with CSP not functioning properly when serving PHP files

While configuring the Apache CSP lockdown for a site, I encountered an unusual behavior when opening the same file as a PHP script compared to opening it as an HTML file. The HTML file looks like this: <html> <head> <meta http-equiv= ...

I am having trouble with Fullcalendar not loading my JSON data to display events

I've been experimenting with the fullcalendar JavaScript library, but I'm struggling to load data from my MySQL database onto the calendar. When I test my db-connect.php file, it does return the first entry in the table, yet the calendar remains ...

Accessing feedback from Reddit's API

After writing some code to search Reddit's API with a specific query, I now want it to display comments as well. Inside my $.getJSON statement that retrieves each title/post based on the search query, I have the following nested code block. The goal i ...

Ways to update the content of a NodeList

When I execute this code in the console: document.querySelectorAll("a.pointer[title='Average']") It fetches a collection of Averages, each with displayed text on the page: <a class="pointer" title="Average" onclick="showScoretab(this)"> ...

Troubleshooting Issues with AngularJS HTTP.get Requests

I'm currently working on a simple AngularJS application that is supposed to extract data from a .json file. While my code doesn't show any errors upon running it, it fails to retrieve the JSON values as expected. I have a feeling that I may be ov ...

Beyond the footer area on the right side

I have a two-column layout, but I'm having issues with the footer area. When I add a border around it, the right side extends beyond what I expected. Check out the issue here. I tested it in Firefox and used some CSS: footer { border-style: solid ...

Creating a Authentic Screw Top Appearance with CSS

I am striving to create a realistic screw head. Here is what I have done so far: <div class="screw"><div class="indent"></div></div> .screw { position: absolute; top: 10px; left: 49%; width: 30px; height: 30px ...

I have noticed that the brand section of the navigation bar changes to black when I hover over it, but I have been unable to locate any

I'm currently working on a Rails application that has a navbar-top with a brand element. However, I've encountered an issue where the background of the brand element turns black when I hover over it. Despite inspecting the browser console, I coul ...

I'm looking to properly position my logo, header, and paragraph within the jumbotron using Dash Bootstrap

While working with Dash in Python, I encountered an issue trying to align the logo header and paragraph horizontally within a jumbotron. Here is what I was seeing: https://i.sstatic.net/ZNTAr.png However, my aim was to achieve a design similar to the imag ...

Ways to automatically refresh my PHP website whenever the content of a text file is updated

A challenge I am facing involves a .php file that currently displays content from a .txt file located on my FTP server onto a webpage. My main issue lies in the fact that I desire to have the .php page automatically refresh whenever new content is added t ...

Implementing a node.js application deployment with pm2 to ensure zero downtime

While there are countless tutorials on developing chat applications using socket.io and node.js, the event-driven advantage of Node is undeniable for building chat apps. However, a recent thought crossed my mind - how can I ensure the sustainability of my ...

Illuminating individual table cells as a user drags their mouse across a row

My goal is to create a feature that allows users to highlight cells in a table by dragging the mouse over them, similar to what is discussed in the question and answer provided here. However, I would like to limit this drag/highlight effect to only span w ...

Error with Bootstrap 4 tabs and JavaScript AJAX implementation

I have implemented Bootstrap 4 tabs to showcase content fetched through an AJAX call. However, I encountered an issue upon completion of the call. The error message displayed is: Uncaught TypeError: $(...).tab is not a function The tabs are initially hi ...

Having trouble aligning my slider in the center

Despite trying various methods to center this slider, such as using align="center" and different margin styles on the images and slider div itself, I am still facing alignment issues. Any assistance would be greatly appreciated. This is my first time posti ...

Can you guide me on utilizing filter in an Apps Script array to retrieve solely the row containing a particular user ID within the cell?

I am using an Apps Script that retrieves data from four different columns in a spreadsheet. However, it currently fetches all the rows instead of just the row that matches the randomly generated 8-digit user ID. function doGet(req) { var doc = Spreadshe ...

How can jQuery verify if an input value is contained within an array?

I've been attempting to verify if the value of an input field is part of an array, but for some reason it's not working. Here is my approach: var postcode1 = []; for (var i = 21000; i < 21999; i++) { postcode1.push({ val: i, text ...

What is the best way to stack several elements on top of each other?

<div class="parent"> <div class="child" id="child-A"> <div class="child" id="child-B"> <div class="child" id="child-C"> </div> The main concept here ...

Unable to determine why node.js express path is not working

const express = require("express"); const app = express(); app.use(express.static("public")); var dirname = __dirname; app.get("/:lang/:app",function(req,res){ console.log(req.params.lang + " " + req.params.app); ...

The perpetual loop in React context triggered by a setState function within a useEffect block

I'm experiencing an endless loop issue with this context component once I uncomment a specific line. Even after completely isolating the component, the problem persists. This peculiar behavior only manifests when the row is discounted and the browser ...

Proper method for incorporating client-side libraries (such as adminLTE) into Vue.js 2.0

Looking to merge adminLTE with vue. I've set up a fresh app using vue create admin-cli Next, I ran npm install admin-lte --save following the instructions in this link: Now npm is storing everything under node_modules/admin-lte I'm not quite ...