Category: javascript

I’m running in a really weird issue to me. I’ve created a function to validate if a string is a Date and if it’s I convert it to a formated string Date

const date = new Date(text);
if (isValidDate(date) && !$.isNumeric(text) && typeof text != 'boolean' && text != null) {
    text = SweetMeSoft.getFormatedDate(date, 'yyyy-MM-dd', true)
}

The thing is when I receive a text that ends with a space and a number I’m receiving a valid date.

Date.parse('MICROFIBRE PVA VILEDA BLEUPQT 5')
result 988693200000

new Date('MICROFIBRE PVA VILEDA BLEUPQT 5')
Tue May 01 2001 00:00:00 GMT-0500 (Colombia Standard Time)

I understand that JS converts the string to dates using some heuristics algorithms and this king of things can happen, but how can I validate if a string is a real date?

I have a c# application which is connecting to a javascript web socket using websocketsharp (probably a node.js websocket server).

I can blindly send data and get responses by copying hex data via chrome devtools after converting it to a byte array.

The problem starts here. I’m trying to decode the response but no luck yet. Tried a lot of examples and functions around the web.

When simply using Encoding.UTF8.GetString result is half readable (for example: i can see nicknames) and messy with a lot of unknown characters.. And already tried other character sets. (Ascii / unicode / utf32 etc…)

When i use int len = bytes[offset + 1] – 0x80; the result is always -126 so i can’t even get to the length / mask part.

Probably didn’t understand the logic or I’m skipping a simple part.

Sorry for my english, any help will be appreciated.

I have some code here, the idea is to create a ranking on an index based on the prices and amount of nutrients of some foods within a Wix database:

function calculate() {
var array = [];
wixData.query('Food').find().then(res => {
        for (let i = 0; i < res.length; i++) {
          const item = res.items[i];

          const nutrientOfAmount = item[nutrientId];
          let grams = Number(item.grams);
          let price = Number(item.price);

          var index = (nutrientOfAmount * grams) / price;

          array.push(index);
          if (Number.isNaN(index)) {
                array.pop()
           }

           array.sort((a, b) => a - b);
           array.reverse();

           if (array[0] === index) {
             $w('#text1').text = item.food;
             $w('#text2').text = `${index}`;
           }
           if (array[1] === index) {
             $w('#text3').text = item.food;
             $w('#text4').text = `${index}`;
           }
           if (array[2] === index) {
             $w('#text5').text = item.food;
             $w('#text6').text = `${index}`;
           }
     }
 })
}

$w('#button').onClick(() => calculate());

only the if cascade is running inside the for so it returns several foods in the #text but none is actually the array[0], array[1] and array[2], the for should run until the if (Number.isNaN (index)) {array.pop()}, and array.sort((a, b) => a – b); should remain on hold until the for has gone through all the foods.

(Note: I cannot place the if cascade outside the for because the ranking takes into account more information, which in this case is inside the for, it will have to be something related to promises)

I’m trying to run two sets of code inside a for loop inside a function, with the second part executing only after the first one completes

I have here two examples of RNGs that pool results from crypto.getRandomValues to reduce the overhead of the expensive system call. The class based approach benchmarks 378M ops/s while the generator only gets 56M ops/s. That’s a 6.75x difference in performance.

class RandClass {
    #entropy; #index
    constructor(poolSize = 1024) {
        this.#entropy = new Uint32Array(poolSize)
        this.#index = 0
        crypto.getRandomValues(this.#entropy)
    }
    next() {
        const value = this.#entropy[this.#index++]
        if (this.#index === this.#entropy.length) {
            crypto.getRandomValues(this.#entropy)
            this.#index = 0
        }
        return { value, done: false }
    }
    [Symbol.iterator]() { return this }
}

const randClass = new RandClass()

function* RandGen(poolSize = 1024) {
    const entropy = new Uint32Array(poolSize)
    while (true) {
        crypto.getRandomValues(entropy)
        for (let i = 0; i < poolSize; ++i) {
            yield entropy[i]
        }
    }
}

const randGen = RandGen()

Can you please tell me how to copy elements to an array without going through them again through getElementsByTagName("*"), and so that they refer to the copied element?

HTML:

<div id="id1"><p id="p1">1</p><p id="p2">2</p></div>

JS:

const el = document.getElementById("id1");
const arr = [];
if(el)
for (const element of el.getElementsByTagName("*")) {
  if(element.textContent === "1") arr.push(element)
}
const cloneEl = el?.cloneNode(true);
function arrCloneWithRelationToCloneEl(arr , cloneEl){
...
return arrClone;
}

Result:

arrClone = [p#p1]

from cloneEl.

Can this be done at all without iterating over the nodes of the cloned element, but somehow by id in childNodes or by creating a virtual DOM to do it? Maybe there is some special function for copying, only to not have to loop every time an object is cloned.

I will be very grateful for the answer!

I tried to do it through creating path in childNodes array. Something like this array [0,0] in results.

I am using vue3, vite and ts. I have a porblem with DOMTokenList. I want to use .entries() method but ts says Property 'entries' does not exist on type 'DOMTokenList'

This is my tsconfig file

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "main.d.ts"],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "typeRoots": ["./node_modules/@types", "src/core/types"],
    "ignoreDeprecations": "5.0",
    "lib":["DOM","ESNext"]
  },
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

Also I am using .enties() function to extend DOMTokenList

DOMTokenList.prototype.removeStartWith = function(prefix:string){
    this.remove(...Array.from(this.entries()).map(([,c]) => c).filter(c => c.startsWith(prefix)))
}

I tried previous ECMA (ES2019) versions but I didn’t get any result. How can I solve that? Thanks for suggestions.

So I’m trying to make a parallax effect based on a tutorial, html and ccs work fine but javascript is totally unresponsive. Images are completely static and don’t respond to mouse movement,they are placed as defined in css file. I want to make the images move when the mouse moves as written below.

I tried to fix it using getElementByClassName but it did nothing. Here’s an excerpt of the relevant html, css and javascript code:

<main>
  <div class="vignette"></div>
  <img src="img/background.png" data-speedx="0.3" data-speedy="0.38" data-speedz="0.0" data-rotation="0" class="parallax bg-img">
  <img src="img/fog_7.png" data-speedx="0.27" data-speedy="0.32" data-speedz="0.0" data-rotation="0" class="parallax fog-7">
  <img src="img/mountain_10.png" data-speedx="0.195" data-speedy="0.195" data-speedz="0.0" data-rotation="0" class="parallax mountain-10">
  <img src="img/fog_6.png" data-speedx="0.25" data-speedy="0.28" data-speedz="0.0" data-rotation="0" class="parallax fog-6">
  <img src="img/mountain_9.png" data-speedx="0.125" data-speedy="0.155" data-speedz="0.15" data-rotation="0.02" class="parallax mountain-9">
  <img src="img/mountain_8.png" data-speedx="0.1" data-speedy="0.11" data-speedz="0.02" data-rotation="0" class="parallax mountain-8">
  <img src="img/fog_5.png" data-speedx="0.16" data-speedy="0.105" data-speedz="0.0" data-rotation="0" class="parallax fog-5">
  <img src="img/mountain_7.png" data-speedx="0.1" data-speedy="0.1" data-speedz="0.09" data-rotation="0" class="parallax mountain-7">
  <div class="text parallax" data-speedx="0.07" data-speedy="0.07" data-rotation="0.11"> 
    <h2>Shoot for the moon</h2>
    <h1>If you miss, you'll land among the stars</h1>
  </div>
  <img src="img/mountain_6.png" data-speedx="0.065" data-speedy="0.05" data-speedz="0.05" data-rotation="0.12" class="parallax mountain-6">
  <img src="img/fog_4.png" data-speedx="0.135" data-speedy="0.115" data-speedz="0.0" data-rotation="0" class="parallax fog-4">
  <img src="img/mountain_5.png" data-speedx="0.08" data-speedy="0.024" data-speedz="0.13" data-rotation="0.1" class="parallax mountain-5">
  <img src="img/fog_3.png" data-speedx="0.11" data-speedy="0.018" data-speedz="0.0" data-rotation="0" class="parallax fog-3">
  <img src="img/mountain_4.png" data-speedx="0.059" data-speedy="0.024" data-speedz="0.35" data-rotation="0.14" class="parallax mountain-4">
  <img src="img/mountain_3.png" data-speedx="0.04" data-speedy="0.018" data-speedz="0.32" data-rotation="0.05" class="parallax mountain-3">
  <img src="img/fog_2.png" data-speedx="0.15" data-speedy="0.115" data-speedz="0.0" data-rotation="0" class="parallax fog-2">
  <img src="img/mountain_2.png" data-speedx="0.0235" data-speedy="0.013"  data-speedz="0.42" data-rotation="0.15" class="parallax mountain-2">
  <img src="img/mountain_1.png" data-speedx="0.027" data-speedy="0.018" data-speedz="0.53" data-rotation="0.2" class="parallax mountain-1">
  <img src="img/sun_rays.png" class="sun-rays hide">
  <img src="img/black_shadow.png" class="black-shadow hide">
  <img src="img/fog_1.png" data-speedx="0.12" data-speedy="0.01" class="parallax fog-1">
 </main>

main{
    position: relative;
    background-color: rgb(56, 38, 172);
    max-height: 100vh;
    max-width: 100vw;
    overflow: hidden;
}

.parallax {
    pointer-events: none;
    transition: 0.45s (cubic-bezier(.2,.49,.32,.99));
    transform: translate(-50%, -50%);
}

.bg-img {
    position: absolute;
    width: 2800px;
    top: calc(50% - 390px);
    left: calc(50% + 10px);
    z-index: 1;
}

.fog-7 {
    position: absolute;
    z-index: 2;
    width: 1900px;
    top: calc(50% - 100px);
    left: calc(50% + 300px);
}

.mountain-10 {
    position: absolute;
    z-index: 3;
    width: 892px;
    top: calc(50% + 69px);
    left: calc(50% + 230px);
}

.fog-6 {
    position: absolute;
    z-index: 4;
    width: 1610px;
    top: calc(50% + 85px);
    left: calc(50% + 10px);
}

.mountain-9 {
    position: absolute;
    z-index: 5;
    width: 470px;
    top: calc(50% + 113px);
    left: calc(50% - 457px);
}

.mountain-8 {
    position: absolute;
    z-index: 6;
    width: 810px;
    top: calc(50% + 86px);
    left: calc(50% - 202px);
}

.mountain-7 {
    position: absolute;
    z-index: 7;
    width: 538px;
    top: calc(50% + 123px);
    left: calc(50% - 305px);
}

.text {
    position: absolute;
    z-index: 8;
    top: 30%;
    left: 50%;
    text-align: center;
    text-transform: uppercase;
    pointer-events: auto;
    color: black;
}

.text h2 {
    font-weight: 100;
    font-size: 3rem;
    line-height: 1.2;
}

.text h1 {
    font-weight: 800;
    font-size: 3.5rem;
    line-height: 1;
}

.mountain-6 {
    position: absolute;
    z-index: 9;
    width: 408px;
    top: calc(50% + 60px);
    left: calc(50% + 590px);
}

.fog-6 {
    position: absolute;
    z-index: 10;
    width: 590px;
    top: calc(50% + 60px);
    left: calc(50% - 590px);
}

.fog-4 {
    position: absolute;
    z-index: 11;
    width: 590px;
    top: calc(50% + 223px);
    left: calc(50% - 60px);
}

.mountain-5 {
    position: absolute;
    z-index: 12;
    width: 408px;
    top: calc(50% + 250px);
    left: calc(50% + 130px);
}

.fog-3 {
    position: absolute;
    z-index: 13;
    width: 1600px;
    top: calc(50% + 110px);
    left: calc(50% - 15px);
}

.mountain-4 {
    position: absolute;
    z-index: 14;
    width: 780px;
    top: calc(50% + 153px);
    left: calc(50% - 385px);
}

.mountain-3
{
    position: absolute;
    z-index: 15;
    width: 419px;
    top: calc(50% + 133px);
    left: calc(50% + 736px);
}


.fog-2 {
    position: absolute;
    z-index: 16;
    width: 590px;
    top: calc(50% + 147px);
    left: calc(50% - 30px);
}

.mountain-2 {
    position: absolute;
    z-index: 17;
    width: 690px;
    top: calc(50% + 154px);
    left: calc(50% + 412px);
}


.mountain-1 {
    position: absolute;
    z-index: 18;
    width: 408px;
    top: calc(50% + 17px);
    left: calc(50% - 601px);
}

.sun-rays {
    position: absolute;
    z-index: 19;
    top: 0;
    right: 0;
    pointer-events: none;
    width: 595px;
}

.black-shadow {
    position: absolute;
    z-index: 20;
    top: 0;
    right: 0;
    pointer-events: none;
    width: 595%;
}

.fog-1 {
    position: absolute;
    z-index: 21;
    width: 1600px;
    top: calc(100% - 355px);
    left: 50%;
}

.vignette {
    position: absolute;
    z-index: 100;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 65%, rgba(0,0,0,0.7))
}

const parallax_el = document.querySelectorAll(".parallax");

let xValue = 0, 
  yValue = 0;
let rotateDegree = 0; 

function update(cursorPosition) {
  parallax_el.forEach ((el) => {
    let speedx = el.dataset.speedx;
    let speedy = el.dataset.speedy;
    let speedz = el.dataset.speedz;
    let rotateSpeed = el.dataset.rotation;

    el.style.transform = `translateX(calc(-50% +${-xValue*speedx}px)) rotateY(${rotateDegree*rotateSpeed}deg) translateY(calc(50% +${yValue*speedy}px)) perspective(2300px) translateZ(${zValue*speedz}px)`;
  });
}

update(0);
    
window.addEventListener("mousemove", (e) => {
  xValue = e.clientX - window.innerWidth / 2;
  yValue = e.clientY - window.innerHeight / 2;

  rotateDegree = (xValue / (window.innerWidth / 2))*20;

  update(e.clientX);

  let zValue = (cursorPosition - parseFloat(getComputedStyle(el).left))*isInLeft * 0.1;
  let isInLeft = parseFloat(getComputedStyle(el).left) < window.innerWidth / 2 ? 1: -1;
  
});

I have an issue with my Bootstrap 5 modal and the popovers I’ve placed on to it.

In my HTML I have the following, which correctly displays when the user hovers over the button. The popover shows an ‘Are you sure?’ type prompt and advises the user to click the button (that is hovered) to continue. Clicking the button then takes the focus and keeps the popover open until clicked again, or clicked away from the element.

This allows the mouse pointer to enter the popover content and click the ‘Continue’ button.

This is the kind of thing I was going for: https://bootstrap-confirmation.js.org but with some more detail about the function shown when the button is hovered…

Anyway, it works great! First time around… If the modal is hidden and then shown again, only the hover part of the popover trigger works, and clicking the button does fire it’s listener, but the popover refuses to stay open (as per the ‘focus’ trigger)..

Please help, it’s driving me mad!

Frustratingly, the snippet below does seem to work, although will throw an error and I’m not sure why?

html

<!-- Close Session button -->
<a tabindex="0" role="button" class="btn btn-sm btn-danger" id="locate-btn-close" data-bs-trigger="hover focus" data-bs-theme="dark" data-bs-placement="top" data-bs-toggle="popover">Close Session</a>
            
    <div id="popover-close-btn-holder" class="d-none">
      <div data-name="close-btn-popover-content">
        <div class="col-sm-12 input-group-sm">
           <p>You can choose to close or save this session at the next screen.</p>
           <p class="continue-text">Click the button to continue...</p>
        </div>
        <div class="text-center confirm-buttons" style="display:none;">
          <button href="#" class="btn btn-sm btn-outline-danger me-2" id="locate-btn-close-cancel">Cancel</button>
          <button href="#" class="btn btn-sm btn-outline-success" id="locate-btn-close-confirm">Continue</button>
    </div>
  </div>
</div>

JS:

const locateModal = document.getElementById('locateScreen')
locateModal.addEventListener('shown.bs.modal', event => {

    //Close Session Button
        
        // 1 - Init the popover
        const locateBtnClosePopover = new bootstrap.Popover($('#locate-btn-close'), {
            html: true,
            sanitize: false,
            customClass: 'locate-footer-popover',
            title: "Are you sure?",
    //      trigger: 'hover focus', // Didn't help, already set in HTML



const locateModal = document.getElementById('locateScreen')
locateModal.addEventListener('shown.bs.modal', event => {

  const locateBtnClosePopover = new bootstrap.Popover($('#locate-btn-close'), {
    html: true,
    sanitize: false,
    customClass: 'locate-footer-popover',
    title: "Are you sure?",
    //      trigger: 'focus',
    content: $('[data-name="close-btn-popover-content"]')
  });

  // 2 - Listen for clicks on the 'Close' button
  $('#locate-btn-close').off('click');
  $('#locate-btn-close').on('click', function() {

    // This is firing, but the popover is closing when the mouse moves towards
    // the buttons, after the modal is shown once, hidden, then re-displayed.

    // Show popover buttons in popover 
    $('[data-name="close-btn-popover-content"] .confirm-buttons').show();

    // Assign listeners to the popover confirm buttons
    //$('#locate-btn-close-confirm').off()
    $('#locate-btn-close-confirm').on('click', function() { // Close Session screen
      
      
        // Do close the session
      
    });

    // Hide 'Click to continue' text
    $('[data-name="close-btn-popover-content"] .input-group-sm .continue-text').hide()
  });

  // When the popover is initially shown, hide the buttons and make sure the text reads:
  // 'click the button to continue', etc
  $('#locate-btn-close').on('inserted.bs.popover', function() {

    $('[data-name="close-btn-popover-content"] .confirm-buttons').hide()
    $('[data-name="close-btn-popover-content"] .input-group-sm .continue-text').show()
  });
  
  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#locateScreen">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="locateScreen" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Popover is on the Save Changes button.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <a id="locate-btn-close" tabindex="0" class="btn btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Save Changes</a>

        <!-- popover -->

        <div id="popover-close-btn-holder" class="d-none">
          <div data-name="close-btn-popover-content">
            <div class="col-sm-12 input-group-sm">
              <p class="continue-text">Click the button to continue...</p>
            </div>
            <div class="text-center confirm-buttons" style="display:none;">
              <button href="#" class="btn btn-sm btn-outline-danger me-2" id="locate-btn-close-cancel">Cancel</button>
              <button href="#" class="btn btn-sm btn-outline-success" id="locate-btn-close-confirm">Continue</button>
            </div>
          </div>
        </div>


      </div>
    </div>
  </div>
</div>


            content: $('[data-name="close-btn-popover-content"]')

        });
        // 2 - Listen for clicks on the 'Close' button

        $('#locate-btn-close').off('click');

        $('#locate-btn-close').on('click', function() {
            console.log('Close button clicked!')
            // This is firing, but the popover is closing when the mouse moves towards

            // the buttons, after the modal is shown once, hidden, then re-displayed.
            // Show popover buttons in popover

            $('[data-name="close-btn-popover-content"] .confirm-buttons').show();
            // Assign listeners to the popover confirm buttons

            //$('#locate-btn-close-confirm').off()

            $('#locate-btn-close-confirm').on('click', function() { // Close Session screen

                locateScreen.hide();

                closeSession();

            });
            // Hide 'Click to continue' text

            $('[data-name="close-btn-popover-content"] .input-group-sm .continue-text').hide()

        });
        // When the popover is initially shown, hide the buttons and make sure the text reads:

        // 'click the button to continue', etc

        $('#locate-btn-close').on('inserted.bs.popover', function() {
            $('[data-name="close-btn-popover-content"] .confirm-buttons').hide()

            $('[data-name="close-btn-popover-content"] .input-group-sm .continue-text').show()

        });

let initialArtists = [
    { id: 0, name: 'Marta Colvin Andrade' },
    { id: 1, name: 'Lamidi Olonade Fakeye'},
    { id: 2, name: 'Louise Nevelson'},
  ];

  let artist = initialArtists.filter(a => a.id);
  
  console.log(artist);

let users = [
    {id: 1, name: "John"},
    {id: 2, name: "Pete"},
    {id: 3, name: "Mary"}
  ];
  
  let someUsers = users.filter(item => item.id);

  console.log(someUsers);

Using the filter method for both arrays, I’m getting unexpected returns for the first artist array .

The first array is returning only 2 elements of the array and the second array is returning all 3.

Please help me with this guys.
I have this array of objects

0: {MealType: Array(4)}
1: {MealType: Array(8)}
2: {MealType: Array(8)}
3: {MealType: Array(4)}
4: {MealType: Array(4)}
5: {MealType: Array(4)}
6: {MealType: Array(4)}

How can i Get the values of each array of MealType (with jquery)?
Thanks in advance.

I tried several things with no luck

Hello I’m new to using HTML & javascript and lastly swift and I’m having trouble modifying the font-size of the li elements in an HTML file via function (swift & javascript).

//Put this function in the HTML "Index" file within the "<script>" section.
function changeTextSize() {
           
            document.body.style['font-size'] = 175
            
 
      document.body.querySelectorAll('li').forEach(e => e.style.fontSize = '175');
  //  document.querySelectorAll('li').forEach(e => e.style.color = "red");
    
}

//Put this swift function in the view-controller you are using the html web-view
func fontIncrease(){
  self.webView.evaluateJavaScript("changeTextSize()", completionHandler: { obj, error in
             
                print("Change text size error (error)")
             })
}

I’m using this dummy HTML project listed below as a template.
https://github.com/swifthublearning/How-To-Load-HTML-File-In-WebView-In-Swift-4-Xcode-9

I tried a number of tactics, but for some reason when I call this function the font remains unchanged, but the height of the li element section gets bigger.

I can can font color for all li elements no problem.

I’m making a website with an organization, and we use Google Sheets for the majority of our backend management because it’s what’s most accessible for our users. We use Google Forms for submitting data to our sheets, and I’d like this website to be able to submit data as well.

I have full access to both the Forms and the Sheets in question, but I can’t figure out how to put a submission into the form’s data.

I found this as the closest thing to an answer I’ve been able to find:
https://webapps.stackexchange.com/questions/28154/importing-data-into-a-google-forms-response-sheet/154041#154041

The issue, however, is that while this solution does allow me to add responses to a form’s data, it needs to be in Google Workspace, which my website is not. I’ve edited Spreadsheets in the past with Google’s API and a client, but the methods used in the above solution aren’t accessible via Google’s Forms API as far as I can tell.

Naturally, the next thing I looked into was initiating a Google Workspace program externally. I found Google Web Apps, but it seems like those can only be embedded in Google Sites, which once again, my website is not.

I am writing html/js code on codingrooms.com and my if statement in a for loop in a function isn’t working.

function arrowBounds() {
    for(i=0;i<moverC.length;i++) {
        x = moverC[i].offsetTop;
    if (x <= -10) and (moverC[i].style.visibility == "visible") {
            moverC[i].style.visibility = "hidden";
            missCount += 1;
        }
}
    for(i=0;i<moverG.length;i++) {
    x = moverG[i].offsetTop;
    if (x <= -10) and (moverG[i].style.visibility == "visible") {
            moverG[i].style.visibility = "hidden";
            missCount += 1;
        }
}
    for(i=0;i<moverY.length;i++) {
        x = moverY[i].offsetTop;
    if (x <= -10) and (moverY[i].style.visibility == "visible") {
            moverY[i].style.visibility = "hidden";
            missCount += 1;
        }
    }
}

I am making a rhythm game and the arrows the counter should go up when the arrows go below -10 I am assuming I formatted something wrong.

I am using Angular 12, and Slick 0.5.1. The problem i am facing is swipeToSlide is working fine in LTR, but in RTL it is not working at all. I am updating rtl value dynamically.

slideConfig = {
    "slidesToShow": 10,
    swipeToSlide: true,
    touchThreshold: 309,
    arrows: true,
    infinite: true,
    dots: false,
    variableWidth: true,
    rtl: this.isRTL
};

updateRTL() {
    const lang = localStorage.getItem('lang');
    if(lang == 'yi' || lang == 'he') {
        this.isRTL = true;
    } else {
        this.isRTL = false;
    }
    this.slideConfig.rtl = this.isRTL;
}

Anyone please help me to fix the issue.

I just found that if i remove variableWidth: true, it start working fine, but i need that property

I’ve created a game with JavaScript and HTML. In the game, we have a table and give every cell an ID for toggling color with an onClick function. The rules are simple: if a cell is clicked, every cell around it, including itself, should change their color (toggle). The game continues until every cell is red.

Now, I want to set some of the cells (not randomly) to become red by default. How can I do that? By the way, if you have any ideas to run this game with shorter code, please let me know. 🙂

Thanks a lot!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Brain Game</title>
</head>
<style>
  body {
    text-align: center;
    display: flex;
    justify-content: center;
  }
table {
  /*border-radius: 10px;*/
  margin-top: 60px;
  border: 1px solid;
  background-color: lightcyan;
  box-shadow: 5px 5px 40px royalblue;
}
td {
  border: 1px solid;
  width: 40px;
  height: 40px;
}
p {
  font-weight: bold;
  font-size: 17px;
}
td {
  background-color: white;
}

.reed {
  background-color: red;
}

</style>
<body>
<div class="container">
  <h2>Table game</h2>
  <p>Try to color all of the cells to <b>red</b></p>
  <table>
    <tr>
      <td id="zero0" onclick="zero0()"></td>
      <td id="zero1" onclick="zero1()"></td>
      <td id="zero2" onclick="zero2()"></td>
      <td id="zero3" onclick="zero3()"></td>
      <td id="zero4" onclick="zero4()"></td>
    </tr>
    <tr>
      <td id="one0" onclick="one0()"></td>
      <td id="one1" onclick="one1()"></td>
      <td id="one2" onclick="one2()"></td>
      <td id="one3" onclick="one3()"></td>
      <td id="one4" onclick="one4()"></td>
    </tr>
    <tr>
      <td id="two0" onclick="two0()"></td>
      <td id="two1" onclick="two1()"></td>
      <td id="two2" onclick="two2()"></td>
      <td id="two3" onclick="two3()"></td>
      <td id="two4" onclick="two4()"></td>
    </tr>
    <tr>
      <td id="three0" onclick="three0()"></td>
      <td id="three1" onclick="three1()"></td>
      <td id="three2" onclick="three2()"></td>
      <td id="three3" onclick="three3()"></td>
      <td id="three4" onclick="three4()"></td>
    </tr>
    <tr>
      <td id="four0" onclick="four0()"></td>
      <td id="four1" onclick="four1()"></td>
      <td id="four2" onclick="four2()"></td>
      <td id="four3" onclick="four3()"></td>
      <td id="four4" onclick="four4()"></td>
    </tr>
  </table>
</div>
<script>
  window.onload = function () {

    document.getElementById("zero0").style.backgroundColor = "red";
    document.getElementById("one3").style.backgroundColor = "red";
    document.getElementById("three2").style.backgroundColor = "red";

  }
  
  function zero0() {

    var cell00 = document.getElementById("zero0");
    let cell01 = document.getElementById("zero1");
    let cell10 = document.getElementById("one0");

    if (cell00.style.backgroundColor == "red"){
      cell00.style.backgroundColor = "white"
    }else {
      cell00.classList.toggle('reed')
    }
    if (cell01.style.backgroundColor == "red"){
      cell01.style.backgroundColor = "white"
    }else {
      cell01.classList.toggle('reed')
    }
    if (cell10.style.backgroundColor == "red"){
      cell10.style.backgroundColor = "white"
    }else {
      cell10.classList.toggle('reed')
    }
  }
  function zero1() {
    var cell00 = document.getElementById("zero0");
    let cell01 = document.getElementById("zero1");
    let cell02 = document.getElementById("zero2");
    let cell11 = document.getElementById("one1");

    if (cell00.style.backgroundColor == "red"){
      cell00.style.backgroundColor = "white"
    }else {
      cell00.classList.toggle('reed')
    }
    if (cell01.style.backgroundColor == "red"){
      cell01.style.backgroundColor = "white"
    }else {
      cell01.classList.toggle('reed')
    }
    if (cell02.style.backgroundColor == "red"){
      cell02.style.backgroundColor = "white"
    }else {
      cell02.classList.toggle('reed')
    }
    if (cell11.style.backgroundColor == "red"){
      cell11.style.backgroundColor = "white"
    }else {
      cell11.classList.toggle('reed')
    }
  }
  function zero2() {
    let cell01 = document.getElementById("zero1");
    let cell02 = document.getElementById("zero2");
    let cell03 = document.getElementById("zero3");
    let cell12 = document.getElementById("one2");

    if (cell01.style.backgroundColor == "red"){
      cell01.style.backgroundColor = "white"
    }else {
      cell01.classList.toggle('reed')
    }
    if (cell02.style.backgroundColor == "red"){
      cell02.style.backgroundColor = "white"
    }else {
      cell02.classList.toggle('reed')
    }
    if (cell03.style.backgroundColor == "red"){
      cell03.style.backgroundColor = "white"
    }else {
      cell03.classList.toggle('reed')
    }
    if (cell12.style.backgroundColor == "red"){
      cell12.style.backgroundColor = "white"
    }else {
      cell12.classList.toggle('reed')
    }
  }
  function zero3() {
    let cell02 = document.getElementById("zero2");
    let cell03 = document.getElementById("zero3");
    let cell04 = document.getElementById("zero4");
    let cell13 = document.getElementById("one3");

    if (cell04.style.backgroundColor == "red"){
      cell04.style.backgroundColor = "white"
    }else {
      cell04.classList.toggle('reed')
    }
    if (cell02.style.backgroundColor == "red"){
      cell02.style.backgroundColor = "white"
    }else {
      cell02.classList.toggle('reed')
    }
    if (cell03.style.backgroundColor == "red"){
      cell03.style.backgroundColor = "white"
    }else {
      cell03.classList.toggle('reed')
    }
    if (cell13.style.backgroundColor == "red"){
      cell13.style.backgroundColor = "white"
    }else {
      cell13.classList.toggle('reed')
    }
  }
  function zero4() {
    let cell03 = document.getElementById("zero3");
    let cell04 = document.getElementById("zero4");
    let cell14 = document.getElementById("one4");

    if (cell03.style.backgroundColor == "red"){
      cell03.style.backgroundColor = "white"
    }else {
      cell03.classList.toggle('reed')
    }
    if (cell04.style.backgroundColor == "red"){
      cell04.style.backgroundColor = "white"
    }else {
      cell04.classList.toggle('reed')
    }
    if (cell14.style.backgroundColor == "red"){
      cell14.style.backgroundColor = "white"
    }else {
      cell14.classList.toggle('reed')
    }
  }
  function one0() {
    var cell00 = document.getElementById("zero0");
    let cell10= document.getElementById("one0");
    let cell11 = document.getElementById("one1");
    let cell20 = document.getElementById("two0");

    if (cell00.style.backgroundColor == "red"){
      cell00.style.backgroundColor = "white"
    }else {
      cell00.classList.toggle('reed')
    }
    if (cell10.style.backgroundColor == "red"){
      cell10.style.backgroundColor = "white"
    }else {
      cell10.classList.toggle('reed')
    }
    if (cell11.style.backgroundColor == "red"){
      cell11.style.backgroundColor = "white"
    }else {
      cell11.classList.toggle('reed')
    }
    if (cell20.style.backgroundColor == "red"){
      cell20.style.backgroundColor = "white"
    }else {
      cell20.classList.toggle('reed')
    }
  }
  function one1() {
    let cell01 = document.getElementById("zero1");
    let cell10 = document.getElementById("one0");
    let cell11 = document.getElementById("one1");
    let cell12 = document.getElementById("one2");
    let cell21 = document.getElementById("two1");

    if (cell01.style.backgroundColor == "red"){
      cell01.style.backgroundColor = "white"
    }else {
      cell01.classList.toggle('reed')
    }
    if (cell10.style.backgroundColor == "red"){
      cell10.style.backgroundColor = "white"
    }else {
      cell10.classList.toggle('reed')
    }
    if (cell11.style.backgroundColor == "red"){
      cell11.style.backgroundColor = "white"
    }else {
      cell11.classList.toggle('reed')
    }
    if (cell12.style.backgroundColor == "red"){
      cell12.style.backgroundColor = "white"
    }else {
      cell12.classList.toggle('reed')
    }
    if (cell21.style.backgroundColor == "red"){
      cell21.style.backgroundColor = "white"
    }else {
      cell21.classList.toggle('reed')
    }
  }
  function one2() {
    let cell02 = document.getElementById("zero2");
    let cell11 = document.getElementById("one1");
    let cell12 = document.getElementById("one2");
    let cell13 = document.getElementById("one3");
    let cell22 = document.getElementById("two2");

    if (cell02.style.backgroundColor == "red"){
      cell02.style.backgroundColor = "white"
    }else {
      cell02.classList.toggle('reed')
    }
    if (cell11.style.backgroundColor == "red"){
      cell11.style.backgroundColor = "white"
    }else {
      cell11.classList.toggle('reed')
    }
    if (cell12.style.backgroundColor == "red"){
      cell12.style.backgroundColor = "white"
    }else {
      cell12.classList.toggle('reed')
    }
    if (cell13.style.backgroundColor == "red"){
      cell13.style.backgroundColor = "white"
    }else {
      cell13.classList.toggle('reed')
    }
    if (cell22.style.backgroundColor == "red"){
      cell22.style.backgroundColor = "white"
    }else {
      cell22.classList.toggle('reed')
    }
  }
  function one3() {
    let cell03 = document.getElementById("zero3");
    let cell12 = document.getElementById("one2");
    let cell13 = document.getElementById("one3");
    let cell14 = document.getElementById("one4");
    let cell23 = document.getElementById("two3");

    if (cell03.style.backgroundColor == "red"){
      cell03.style.backgroundColor = "white"
    }else {
      cell03.classList.toggle('reed')
    }
    if (cell12.style.backgroundColor == "red"){
      cell12.style.backgroundColor = "white"
    }else {
      cell12.classList.toggle('reed')
    }
    if (cell13.style.backgroundColor == "red"){
      cell13.style.backgroundColor = "white"
    }else {
      cell13.classList.toggle('reed')
    }
    if (cell14.style.backgroundColor == "red"){
      cell14.style.backgroundColor = "white"
    }else {
      cell14.classList.toggle('reed')
    }
    if (cell23.style.backgroundColor == "red"){
      cell23.style.backgroundColor = "white"
    }else {
      cell23.classList.toggle('reed')
    }
  }
  function one4() {
    let cell04 = document.getElementById("zero4");
    let cell13 = document.getElementById("one3");
    let cell14 = document.getElementById("one4");
    let cell24 = document.getElementById("two4");

    if (cell04.style.backgroundColor == "red"){
      cell04.style.backgroundColor = "white"
    }else {
      cell04.classList.toggle('reed')
    }
    if (cell13.style.backgroundColor == "red"){
      cell13.style.backgroundColor = "white"
    }else {
      cell13.classList.toggle('reed')
    }
    if (cell14.style.backgroundColor == "red"){
      cell14.style.backgroundColor = "white"
    }else {
      cell14.classList.toggle('reed')
    }
    if (cell24.style.backgroundColor == "red"){
      cell24.style.backgroundColor = "white"
    }else {
      cell24.classList.toggle('reed')
    }
  }
  function two0() {
    let cell10 = document.getElementById("one0");
    let cell20 = document.getElementById("two0");
    let cell21 = document.getElementById("two1");
    let cell30 = document.getElementById("three0");

    if (cell10.style.backgroundColor == "red"){
      cell10.style.backgroundColor = "white"
    }else {
      cell10.classList.toggle('reed')
    }
    if (cell20.style.backgroundColor == "red"){
      cell20.style.backgroundColor = "white"
    }else {
      cell20.classList.toggle('reed')
    }
    if (cell21.style.backgroundColor == "red"){
      cell21.style.backgroundColor = "white"
    }else {
      cell21.classList.toggle('reed')
    }
    if (cell30.style.backgroundColor == "red"){
      cell30.style.backgroundColor = "white"
    }else {
      cell30.classList.toggle('reed')
    }
  }
  function two1() {
    let cell11 = document.getElementById("one1");
    let cell20 = document.getElementById("two0");
    let cell21 = document.getElementById("two1");
    let cell22 = document.getElementById("two2");
    let cell31 = document.getElementById("three1");

    if (cell11.style.backgroundColor == "red"){
      cell11.style.backgroundColor = "white"
    }else {
      cell11.classList.toggle('reed')
    }
    if (cell20.style.backgroundColor == "red"){
      cell20.style.backgroundColor = "white"
    }else {
      cell20.classList.toggle('reed')
    }
    if (cell21.style.backgroundColor == "red"){
      cell21.style.backgroundColor = "white"
    }else {
      cell21.classList.toggle('reed')
    }
    if (cell22.style.backgroundColor == "red"){
      cell22.style.backgroundColor = "white"
    }else {
      cell22.classList.toggle('reed')
    }
    if (cell31.style.backgroundColor == "red"){
      cell31.style.backgroundColor = "white"
    }else {
      cell31.classList.toggle('reed')
    }
  }
  function two2() {
    let cell12 = document.getElementById("one2");
    let cell21 = document.getElementById("two1");
    let cell22 = document.getElementById("two2");
    let cell23 = document.getElementById("two3");
    let cell32 = document.getElementById("three2");

    if (cell12.style.backgroundColor == "red"){
      cell12.style.backgroundColor = "white"
    }else {
      cell12.classList.toggle('reed')
    }
    if (cell21.style.backgroundColor == "red"){
      cell21.style.backgroundColor = "white"
    }else {
      cell21.classList.toggle('reed')
    }
    if (cell22.style.backgroundColor == "red"){
      cell22.style.backgroundColor = "white"
    }else {
      cell22.classList.toggle('reed')
    }
    if (cell23.style.backgroundColor == "red"){
      cell23.style.backgroundColor = "white"
    }else {
      cell23.classList.toggle('reed')
    }
    if (cell32.style.backgroundColor == "red"){
      cell32.style.backgroundColor = "white"
    }else {
      cell32.classList.toggle('reed')
    }
  }
  function two3() {
    let cell13 = document.getElementById("one3");
    let cell22 = document.getElementById("two2");
    let cell23 = document.getElementById("two3");
    let cell24 = document.getElementById("two4");
    let cell33 = document.getElementById("three3");

    if (cell13.style.backgroundColor == "red"){
      cell13.style.backgroundColor = "white"
    }else {
      cell13.classList.toggle('reed')
    }
    if (cell22.style.backgroundColor == "red"){
      cell22.style.backgroundColor = "white"
    }else {
      cell22.classList.toggle('reed')
    }
    if (cell23.style.backgroundColor == "red"){
      cell23.style.backgroundColor = "white"
    }else {
      cell23.classList.toggle('reed')
    }
    if (cell24.style.backgroundColor == "red"){
      cell24.style.backgroundColor = "white"
    }else {
      cell24.classList.toggle('reed')
    }
    if (cell33.style.backgroundColor == "red"){
      cell33.style.backgroundColor = "white"
    }else {
      cell33.classList.toggle('reed')
    }
  }
  function two4() {
    let cell14 = document.getElementById("one4");
    let cell23 = document.getElementById("two3");
    let cell24 = document.getElementById("two4");
    let cell34 = document.getElementById("three4");

    if (cell14.style.backgroundColor == "red"){
      cell14.style.backgroundColor = "white"
    }else {
      cell14.classList.toggle('reed')
    }
    if (cell23.style.backgroundColor == "red"){
      cell23.style.backgroundColor = "white"
    }else {
      cell23.classList.toggle('reed')
    }
    if (cell24.style.backgroundColor == "red"){
      cell24.style.backgroundColor = "white"
    }else {
      cell24.classList.toggle('reed')
    }
    if (cell34.style.backgroundColor == "red"){
      cell34.style.backgroundColor = "white"
    }else {
      cell34.classList.toggle('reed')
    }
  }
  function three0() {
    let cell20 = document.getElementById("two0");
    let cell30 = document.getElementById("three0");
    let cell31 = document.getElementById("three1");
    let cell40 = document.getElementById("four0");

    if (cell20.style.backgroundColor == "red"){
      cell20.style.backgroundColor = "white"
    }else {
      cell20.classList.toggle('reed')
    }
    if (cell30.style.backgroundColor == "red"){
      cell30.style.backgroundColor = "white"
    }else {
      cell30.classList.toggle('reed')
    }
    if (cell31.style.backgroundColor == "red"){
      cell31.style.backgroundColor = "white"
    }else {
      cell31.classList.toggle('reed')
    }
    if (cell40.style.backgroundColor == "red"){
      cell40.style.backgroundColor = "white"
    }else {
      cell40.classList.toggle('reed')
    }
  }
  function three1(){
    let cell21 = document.getElementById("two1");
    let cell30 = document.getElementById("three0");
    let cell31 = document.getElementById("three1");
    let cell32 = document.getElementById("three2");
    let cell41 = document.getElementById("four1");

    if (cell21.style.backgroundColor == "red"){
      cell21.style.backgroundColor = "white"
    }else {
      cell21.classList.toggle('reed')
    }
    if (cell30.style.backgroundColor == "red"){
      cell30.style.backgroundColor = "white"
    }else {
      cell30.classList.toggle('reed')
    }
    if (cell31.style.backgroundColor == "red"){
      cell31.style.backgroundColor = "white"
    }else {
      cell31.classList.toggle('reed')
    }
    if (cell32.style.backgroundColor == "red"){
      cell32.style.backgroundColor = "white"
    }else {
      cell32.classList.toggle('reed')
    }
    if (cell41.style.backgroundColor == "red"){
      cell41.style.backgroundColor = "white"
    }else {
      cell41.classList.toggle('reed')
    }
  }
  function three2(){
    let cell22 = document.getElementById("two2");
    let cell31 = document.getElementById("three1");
    let cell32 = document.getElementById("three2");
    let cell33 = document.getElementById("three3");
    let cell42 = document.getElementById("four2");

    if (cell22.style.backgroundColor == "red"){
      cell22.style.backgroundColor = "white"
    }else {
      cell22.classList.toggle('reed')
    }
    if (cell31.style.backgroundColor == "red"){
      cell31.style.backgroundColor = "white"
    }else {
      cell31.classList.toggle('reed')
    }
    if (cell32.style.backgroundColor == "red"){
      cell32.style.backgroundColor = "white"
    }else {
      cell32.classList.toggle('reed')
    }
    if (cell33.style.backgroundColor == "red"){
      cell33.style.backgroundColor = "white"
    }else {
      cell33.classList.toggle('reed')
    }
    if (cell42.style.backgroundColor == "red"){
      cell42.style.backgroundColor = "white"
    }else {
      cell42.classList.toggle('reed')
    }
  }
  function three3() {
    let cell23 = document.getElementById("two3");
    let cell32 = document.getElementById("three2");
    let cell33 = document.getElementById("three3");
    let cell34 = document.getElementById("three4");
    let cell43 = document.getElementById("four3");

    if (cell23.style.backgroundColor == "red"){
      cell23.style.backgroundColor = "white"
    }else {
      cell23.classList.toggle('reed')
    }
    if (cell33.style.backgroundColor == "red"){
      cell32.style.backgroundColor = "white"
    }else {
      cell32.classList.toggle('reed')
    }
    if (cell33.style.backgroundColor == "red"){
      cell33.style.backgroundColor = "white"
    }else {
      cell33.classList.toggle('reed')
    }
    if (cell34.style.backgroundColor == "red"){
      cell34.style.backgroundColor = "white"
    }else {
      cell34.classList.toggle('reed')
    }
    if (cell43.style.backgroundColor == "red"){
      cell43.style.backgroundColor = "white"
    }else {
      cell43.classList.toggle('reed')
    }
  }
  function three4() {
    let cell24 = document.getElementById("two4");
    let cell33 = document.getElementById("three3");
    let cell34 = document.getElementById("three4");
    let cell44 = document.getElementById("four4");

    if (cell24.style.backgroundColor == "red"){
      cell24.style.backgroundColor = "white"
    }else {
      cell24.classList.toggle('reed')
    }
    if (cell33.style.backgroundColor == "red"){
      cell33.style.backgroundColor = "white"
    }else {
      cell33.classList.toggle('reed')
    }
    if (cell34.style.backgroundColor == "red"){
      cell34.style.backgroundColor = "white"
    }else {
      cell34.classList.toggle('reed')
    }
    if (cell44.style.backgroundColor == "red"){
      cell44.style.backgroundColor = "white"
    }else {
      cell44.classList.toggle('reed')
    }
  }
  function four0() {
    let cell30 = document.getElementById("three0");
    let cell40 = document.getElementById("four0");
    let cell41 = document.getElementById("four1");

    if (cell30.style.backgroundColor == "red"){
      cell30.style.backgroundColor = "white"
    }else {
      cell30.classList.toggle('reed')
    }
    if (cell41.style.backgroundColor == "red"){
      cell41.style.backgroundColor = "white"
    }else {
      cell41.classList.toggle('reed')
    }
    if (cell40.style.backgroundColor == "red"){
      cell40.style.backgroundColor = "white"
    }else {
      cell40.classList.toggle('reed')
    }
  }
  function four1() {
    let cell31 = document.getElementById("three1");
    let cell40 = document.getElementById("four0");
    let cell41 = document.getElementById("four1");
    let cell42 = document.getElementById("four2");

    if (cell31.style.backgroundColor == "red"){
      cell31.style.backgroundColor = "white"
    }else {
      cell31.classList.toggle('reed')
    }
    if (cell40.style.backgroundColor == "red"){
      cell40.style.backgroundColor = "white"
    }else {
      cell40.classList.toggle('reed')
    }
    if (cell41.style.backgroundColor == "red"){
      cell41.style.backgroundColor = "white"
    }else {
      cell41.classList.toggle('reed')
    }
    if (cell42.style.backgroundColor == "red"){
      cell42.style.backgroundColor = "white"
    }else {
      cell42.classList.toggle('reed')
    }
  }
  function four2() {
    let cell32 = document.getElementById("three2");
    let cell41 = document.getElementById("four1");
    let cell42 = document.getElementById("four2");
    let cell43 = document.getElementById("four3");

    if (cell32.style.backgroundColor == "red"){
      cell32.style.backgroundColor = "white"
    }else {
      cell32.classList.toggle('reed')
    }
    if (cell41.style.backgroundColor == "red"){
      cell41.style.backgroundColor = "white"
    }else {
      cell41.classList.toggle('reed')
    }
    if (cell42.style.backgroundColor == "red"){
      cell42.style.backgroundColor = "white"
    }else {
      cell42.classList.toggle('reed')
    }
    if (cell43.style.backgroundColor == "red"){
      cell43.style.backgroundColor = "white"
    }else {
      cell43.classList.toggle('reed')
    }
  }
  function four3() {
    let cell33 = document.getElementById("three3");
    let cell42 = document.getElementById("four2");
    let cell43 = document.getElementById("four3");
    let cell44 = document.getElementById("four4");

    if (cell33.style.backgroundColor == "red"){
      cell33.style.backgroundColor = "white"
    }else {
      cell33.classList.toggle('reed')
    }
    if (cell42.style.backgroundColor == "red"){
      cell42.style.backgroundColor = "white"
    }else {
      cell42.classList.toggle('reed')
    }
    if (cell43.style.backgroundColor == "red"){
      cell43.style.backgroundColor = "white"
    }else {
      cell43.classList.toggle('reed')
    }
    if (cell44.style.backgroundColor == "red"){
      cell44.style.backgroundColor = "white"
    }else {
      cell44.classList.toggle('reed')
    }
  }
  function four4() {
    let cell34 = document.getElementById("three4");
    let cell43 = document.getElementById("four3");
    let cell44 = document.getElementById("four4");

    if (cell34.style.backgroundColor == "red"){
      cell34.style.backgroundColor = "white"
    }else {
      cell34.classList.toggle('reed')
    }
    if (cell43.style.backgroundColor == "red"){
      cell43.style.backgroundColor = "white"
    }else {
      cell43.classList.toggle('reed')
    }
    if (cell44.style.backgroundColor == "red"){
      cell44.style.backgroundColor = "white"
    }else {
      cell44.classList.toggle('reed')
    }
  }


</script>
</body>
</html>