Author: Blancer

<script>
  let checked = <?php echo $row["restriction"] ?>;
  console.log(checked);
</script>

When I was using a JS variable with let to store a php value, this output appears with errors:

1
userManage.php:88 Uncaught SyntaxError: Identifier 'checked' has already been declared (at userManage.php:88:49)
userManage.php:109 Uncaught SyntaxError: Identifier 'checked' has already been declared (at userManage.php:109:49) 
userManage.php:130 Uncaught SyntaxError: Identifier 'checked' has already been declared (at userManage.php:130:49)

The console.log only runs once then the three other values get an error.

After replacing let -> var, then there’s clearly nothing wrong

<script>
  var checked = <?php echo $row["restriction"] ?>;
  console.log(checked);
</script>

Output:

1
1
1
0
0

I am dynamically adding DOM elements during initialization using JavaScript.
All the elements are correctly added to the DOM (see developer tools screenshot — all tags are inside the container).

However, when I slide to the next page using transform: translateX(), the elements are not visible, even though they are definitely in the DOM and have correct size (see the second screenshot).

What could be causing this issue?

What I’ve checked so far:

✅ The images exist and paths are correct.

✅ HTML elements are properly added inside .page-grid containers.

✅ The first page (data-page=”0″) displays perfectly fine.

✅ It’s not a CSS display: none issue.

✅ It’s not an opacity problem.

✅ The container sizes are correct (checked with developer tools).

But still, the second page (data-page=”1″) does not render images when sliding.

const pages = [{
    prefix: 'assets/emoji_',
    count: 18
  },
  {
    prefix: 'assets/effect_',
    count: 18
  }
];

function initializePages() {
  const grids = document.querySelectorAll('.page-grid');
  grids.forEach((grid, index) => {
    const page = pages[index];
    for (let i = 1; i <= page.count; i++) {
      const img = document.createElement('img');
      img.src = `${page.prefix}${String(i).padStart(2, '0')}.png`;
      img.alt = `${page.prefix}${i}`;
      grid.appendChild(img);
    }
  });
}

function updateSlider() {
  const slider = document.querySelector('.page-slider');
  slider.style.transform = `translateX(-100%)`; // simulate sliding to page 1
}

initializePages();
updateSlider();

.page-slider {
  display: flex;
  width: 100%;
  overflow: hidden;
  transition: transform 0.4s ease;
}

.page-grid {
  min-width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

<div class="page-slider">
  <div class="page-grid" data-page="0"></div>
  <div class="page-grid" data-page="1"></div>
</div>

✅ Page 0 (data-page=”0″) — images visible

❌ Page 1 (data-page=”1″) — images not visible, but DOM elements exist

Thank you in advance for your help!

I am dynamically adding DOM elements during initialization using JavaScript.
All the elements are correctly added to the DOM (see developer tools screenshot — all tags are inside the container).

However, when I slide to the next page using transform: translateX(), the elements are not visible, even though they are definitely in the DOM and have correct size (see the second screenshot).

What could be causing this issue?

What I’ve checked so far:

✅ The images exist and paths are correct.

✅ HTML elements are properly added inside .page-grid containers.

✅ The first page (data-page=”0″) displays perfectly fine.

✅ It’s not a CSS display: none issue.

✅ It’s not an opacity problem.

✅ The container sizes are correct (checked with developer tools).

But still, the second page (data-page=”1″) does not render images when sliding.

html

<div class="page-slider">
  <div class="page-grid" data-page="0"></div>
  <div class="page-grid" data-page="1"></div>
</div>

css

.page-slider {
  display: flex;
  width: 100%;
  overflow: hidden;
  transition: transform 0.4s ease;
}

.page-grid {
  min-width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

js

const pages = [
  { prefix: 'assets/emoji_', count: 18 },
  { prefix: 'assets/effect_', count: 18 }
];

function initializePages() {
  const grids = document.querySelectorAll('.page-grid');
  grids.forEach((grid, index) => {
    const page = pages[index];
    for (let i = 1; i <= page.count; i++) {
      const img = document.createElement('img');
      img.src = `${page.prefix}${String(i).padStart(2, '0')}.png`;
      img.alt = `${page.prefix}${i}`;
      grid.appendChild(img);
    }
  });
}

function updateSlider() {
  const slider = document.querySelector('.page-slider');
  slider.style.transform = `translateX(-100%)`; // simulate sliding to page 1
}

initializePages();
updateSlider();

✅ Page 0 (data-page=”0″) — images visible

❌ Page 1 (data-page=”1″) — images not visible, but DOM elements exist

Thank you in advance for your help!

I’m using Glide.js along with Twig and vanilla JavaScript to create a gallery with one main image and a thumbnail slider. The thumbnails should display vertically (or horizontally on certain breakpoints), and everything works after I open DevTools or resize the window — but on initial load, the layout is broken (thumbnails are misaligned or not transformed correctly).

Here’s how I’m mounting everything:

window.onload = function () {
    const glideMain = new Glide('.glide-main', {
      type: 'carousel',
      perView: 1,
      autoplay: false,
      gap: 0,
      animationDuration: 500,
    });
  
    const glideThumb = new Glide('.glide-thumb', {
      type: 'slider',
      focusAt: 0,
      dragThreshold: 0,
      animationDuration: 500,
    });
  
    const thumbSlides = document.querySelectorAll('.glide-thumb .glide__slide');
  
    // Function to apply z-index fix
    function applyZIndexFix() {
      document.querySelectorAll('.glide__thumb, .glide__thumb > img').forEach(el => {
        el.style.zIndex = '999';
      });
    }
  
    thumbSlides.forEach((slide, index) => {
      slide.addEventListener('click', function (e) {
        e.preventDefault();
        glideMain.go('=' + index);
        setActiveThumbnail(index);
      });
    });
  
    function setActiveThumbnail(index) {
      thumbSlides.forEach(slide => slide.classList.remove('active'));
      if (thumbSlides[index]) {
        thumbSlides[index].classList.add('active');
      }
      applyZIndexFix();
    }
  
    setActiveThumbnail(0);
  
    function updateThumbTransformVertical(activeIndex) {
      const thumbContainer = document.querySelector('.glide-thumb .glide__slides');
      const containerHeight = document.querySelector('.glide-thumb').offsetHeight;
      const totalSlides = thumbSlides.length;
  
      const slideHeight = thumbSlides[0]?.offsetHeight + 10 || 0;
      const maxTranslate = (totalSlides * slideHeight) - containerHeight;
  
      const centerIndex = 2;
      let translateY = 0;
  
      if (activeIndex <= centerIndex) {
        translateY = 0;
      } else if (activeIndex >= totalSlides - centerIndex - 1) {
        translateY = maxTranslate;
      } else {
        translateY = (activeIndex - centerIndex) * slideHeight;
      }
  
      if (activeIndex === totalSlides - 1 || activeIndex === totalSlides - 2 || activeIndex === totalSlides - 3) {
        translateY -= 10;
      }
  
      thumbContainer.style.transition = 'transform 0.5s ease';
      thumbContainer.style.transform = `translate3d(0, ${-translateY}px, 0)`;
  
      applyZIndexFix();
    }
  
    function updateThumbTransformHorizontal(activeIndex) {
      const thumbContainer = document.querySelector('.glide-thumb .glide__slides');
      const containerWidth = document.querySelector('.glide-thumb').offsetWidth;
      const totalSlides = thumbSlides.length;
  
      const slideWidth = thumbSlides[0]?.offsetWidth + 10 || 0;
      const maxTranslate = (totalSlides * slideWidth) - containerWidth;
  
      const centerIndex = 2;
      let translateX = 0;
  
      if (activeIndex <= centerIndex) {
        translateX = 0;
      } else if (activeIndex >= totalSlides - centerIndex - 1) {
        translateX = maxTranslate;
      } else {
        translateX = (activeIndex - centerIndex) * slideWidth;
      }
  
      thumbContainer.style.transition = 'transform 0.5s ease';
      thumbContainer.style.transform = `translate3d(${ -translateX }px, 0, 0)`;
  
      applyZIndexFix();
    }
  
    glideMain.on('run', function () {
      setActiveThumbnail(glideMain.index);
  
      const width = window.innerWidth;
      if (width >= 768 && width <= 1131) {
        updateThumbTransformHorizontal(glideMain.index);
      } else {
        updateThumbTransformVertical(glideMain.index);
      }
    });
  
    glideMain.mount();
    applyZIndexFix(); // Apply z-index after mounting
  
    function checkScreenWidth() {
      const width = window.innerWidth;
  
      if (width >= 1132 || width < 768) {
        document.querySelector('.glide-thumb').classList.remove('horizontal');
        glideThumb.mount();
      } else if (width >= 768 && width <= 1131) {
        document.querySelector('.glide-thumb').classList.add('horizontal');
        glideThumb.mount();
      }
  
      applyZIndexFix();
    }
  
    checkScreenWidth();
  
    window.onresize = function () {
      checkScreenWidth();
    };
  
    setTimeout(() => {
      updateThumbTransformVertical(glideMain.index);
    }, 100);
  };

As I see initially it has width: 0 px and after triggering screen width it gets the real width value which is appropriate.

I am trying to call afterUpdate, afterLayout or afterDraw

I try to directly put this in plugns or annotatinos,

However nothing works, how can I make this correctly?

What I want to do is written here, but this is chartjs v2.

How to add images as labels to Canvas Charts using chart.js

const bar_options = {
  responsive: true,
  indexAxis: 'y',
  plugins: {
    afterUpdate: chart => {
      console.log("test afterUpdate");
    }  ,
    afterLayout: chart => {
      console.log("test afterLayout");
    } , 
    afterDraw: chart => {  
      console.log("test afterDraw");
    },
    annotations:{
      afterUpdate: chart => {
        console.log("test in annotation afterUpdate");
      }  ,
      afterLayout: chart => {
        console.log("test in annotation afterLayout");
      }  
    },
  },
};

<Bar options={bar_options} data={mydata}/>

Problem Origin
I want to create a class that will use the sharp library for image processing. The class is also expected to return some data for further processing.

Since sharp has a “promise-based” nature and I’m very new to the concept of promises, I encountered some problems. I haven’t found the solution/explanation in other threads/topics/forums… Or, maybe, I just wasn’t able to wrap my mind about that.

Problem Description
I started writing a class that accepts a path to an image and reads some data from it. To be able to wait for the reading to finish before proceding further, I used a loop with the sleep function (don’t understand its code well enough, but nevertheless…). It even works somehow (I feel there may be some problems that arise in the future).

const sharp = require('sharp');

class Image {
  imgBuf;
  imgData;
  notReady = true;

  constructor(imgPath) {
    const img = sharp(imgPath);
    (async () => {
      this.imgBuf = await img.raw().toBuffer();
      this.imgData = await img.metadata();
      this.notReady = false;
    })();
  }
}

const sleep = ms => new Promise(r => setTimeout(r, ms));

(async () => {
  const imgPath = 'test.png';
  const image = new Image(imgPath);
  while (image.notReady) { await sleep(0); }  // <===========
  console.log(image.imgBuf);
})();

But if to move the sleeping loop to the class, the code is stuck in an infinite loop:

...
      this.notReady = false;
    })();
    while (this.notReady) { sleep(0); }  // <===========
...
  const image = new Image(imgPath);
  // while (image.notReady) { await sleep(0); }
...

Question: Why the latter code doesn’t work?

P.S.: Any suggestions/recommendations for the code are highly appreciated.

I’m working on a NestJS app and in it, one route has file uploading in it. I am uploading the file and its metadata using form-data. Right now, I am able to upload just one file at a time and the form-data looks like this:

Key      Type     Value
file     File     some_file.pdf
name     Text     File Name
type     Text     document
category Text     profile

and so on and so forth.

My DTO looks like this:

export class UploadFileDto {
    @IsString()
    @Length(2, 255)
    name: string;
    @IsString()
    type: string;
    @IsString()
    category: string;
    @IsOptional()
    force: string = 'false';
}

This works fine for just one file. My question now is that I want to be able to upload multiple files and all of those files would have their unique metadata. How can I do this and how can I structure my form-data to handle this?

I have a website and it works correctly in Desktop and Androids.

When I check my website in Iphone, there are 2 things that are wrong

1. Size Value in HTML input tag does not increase the size of input but it depends on Max Value

2. When i scroll down my website while it loads more contents, the page scroll up to the beginning which is different in Desktop and Androids.

Is there any solution to fix this like changing some my HTML and Javascript codes in order it to work correctly in Iphone browser?

These are my codes:

<input  min="1" max="200" value="1" maxlength="7" required size="7">

if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - 50)){//Loads}

I’m currently making a generated Google Document prefilled with answers using a created template to replace text from a Google Form/Sheet using the Apps Script. I’ve taken a pre-existing template for my script and I’m trying to edit it to work. However, I want to replace the vaule in a certain part of the body with different text if the answer is “Yes” in the form (The “Fatigue related health or safety issues”) or remove/delete the text line entirely if the answer is “No”. It just takes the vaule of the submitted cell in the Google Sheet at the moment (Which is just “Yes” or “No” from the single choice selection for the specific part I want to replace on the Google form upon submission).

I have tried this so far but I keep returning errors (At if Line statement when I attempt to save it) and I am not sure how to change my working to get it behave the way I want to

function JSAGoogleFormFill(e) {
  var Timestamp = e.values[0];
  var Event = e.values [1];
  //(Vaules same as listed above, Abridged)
  var Fatigue_related_health_or_safety_issues = e.values [10];

  
  var FinalDocument = DriveApp.getFileById("FILE"); 
  var FinalResponse = DriveApp.getFolderById("FOLDER");

  var copy = FinalDocument.makeCopy(Start_Date+', '+Event, FinalResponse);
  
  var doc = DocumentApp.openById(copy.getId());

  var body = doc.getBody();

  body.replaceText ("{{Event}}", Event);
  //(Abridged here)
  body.replaceText ("{{Fatigue}}", Fatigue_related_health_or_safety_issues);
   if body.replaceText "Yes" {
    "Fatigue related health or safety issues";
   }
   else body.replaceText "No" {
    body.editAsText().deleteText;
   }
  


  doc.saveAndClose();

  }

Any Help is greatly appricated! Thanks in advance

I have a bunch of files that run various tests and return results to a log file.

I have helper functions that create and log file and add to it.

I want to dynamically name that log file, based off the time and date of when the script is run. To that end I need to store the file’s name in a variable on the file that triggers all the tests (main.js) and make it available to the functions in my helper-function.js file.

I’ve been experimenting with setting a environmental variable on main.js but have had no success getting all the helper functions to read it.

Whilst it seems I can set it on main.js and have the createLogs() function use it, the subsequent updateLogs() function, which is exported (module.exports = {updateLogs}) to other files, cannot. I’m guessing the other files are simply not “aware” of the environment variable.

However, hard coding the environment variable in helper-functions.js works – both helper functions can see it and use it.

Does anyone know a way I can set process.env.LOGFILE with a dynamic value and make it available to all helper functions? (note: due to security restrictions I cannot use 3rd party packages to achieve this).
`

My files are as such:

//main.js
const d = new Date();
const logName = "fooBar";
process.env.LOGFILE = logName + "-" + d.getDay() + "-" + d.getMonth() + "-" + d.getFullYear()  +  ".json";
createLogs(logName);

// Running tests on other files...

helper-functions.js

//If I uncomment the below it works, but file name is hard coded.
//process.env.LOGFILE = "customLogs.json";
    
//Create log file when scripts are first run
const createLogs = (logName) => {
    exec('git branch --show-current', (err, stdout, stderr) => {
        if (err) {
            console.log("Error getting git branch:" + stderr);
        }

        const startTime = ((Date()).toLocaleString()).split('GMT')[0];
        const branchName = stdout ? stdout.replace(/(rn|n|r)/gm,"") : "no-branch";

        let repObjString = `{"details":{"name": "${logName}","time": "${startTime}","branch": "${branchName}"},"report":{}}`;

        const logFileName = `logs/${process.env.LOGFILE}`; //<== THIS WORKS
        if (!fs.existsSync(logFileName)) {
            console.log("Log doesnt exist. Making one...");
            fs.writeFile(logFileName, repObjString, function (err) {
                if (err) throw err;
                console.log('Creating file!');
            });
        }
    });
}

// Update logs
const updateLogs = (logObj) => {
    const logName = `logs/${process.env.LOGFILE}`; //<== THIS DOES NOT WORK

    fs.readFile(logName, 'utf8', function (err, logData) {
        if (err) throw err;
        Object.assign(logData["report"], logObj);
        fs.writeFile (logName, logData, function(err) {
            if (err) throw err;
            console.log('Log updated');
        });
    });
}

First time I’ve posted a coding question on here. I’ve nearly completed a JS/HTML/CSS game and will be uploading to Steam soon. Long story short, I’ve run into a snag, needing to move all inline styles in HTML into an external css file. In doing this, my working code seems to have broken. I’ve boiled it down to this question: Why does the button in the code below not display the div? With all styling moved to an external CSS file, how can I get javascript lines such as document.getElementById(“id”).style.display = “” to work with minimal adjustments to my thousands of lines of code?

CSS:

#testID {
    display: none;
}

HTML:

<div id="testID">
    1234
</div>
<div>
    <button onclick="showFn()">Show</button>
</div>

Javascript:

function showFn() {
  document.getElementById("testID").style.display = ""
}

https://developer.mozilla.org/en-US/play?id=8DWmSa2OSAOFYyk6WFDBpHAIX1L8ivSW9Mlt%2FEoNuiBZn6ASj6kbkw2X5bH8ONcg9qM1Yn7toO1F0Agq
I want the center of the gradient to reach the mouse, but from what i’m seeing, it tends to overshoot at longer distances away from the center. Can anyone help me with either fixing this or putting me onto the right direction?

I’m currently developing an Android App using a WebView and realized that the behavior of click events differs between desktop and mobile.

<button onclick="console.log('clicked')" />

On desktop when pressing a button and releasing after some milliseconds, the click-event is fired as expected.
On mobile the click event is only fired after very briefly touching the button. Long presses are ignored.

I would like the app to behave mostly like other (native) apps. Is there a way to also trigger click events when touching the button for a longer period?

I’ve been doing The Odin Project and am on the Rock, Paper, Scissors assignment.

I’ve created a function to play 5 rounds of RPS and keep track of the score for the human/user and the computer. This part works fine.

The five rounds run through a for loop, which has no issues, then after the loop, it should call declareWinner(), but it doesn’t do anything once the initial 5-round loop is finished. No error message, nothing.

I would really appreciate it if you could take a look at the code below and let me know what you think.

I’m sure there’s some rookie mistake in there, but I can’t figure it out for the life of me. Also, feel free to provide any other criticisms, advice, feedback, and whatnot that will make me a better coder.

To narrow down if the issue is in the declareWinner() function or not, I’ve tried adding a regular console.log() in its place at the exit of the loop to see if that will run. Alas, it does not. The loop exits and that’s all she wrote.

Thanks!

//CODE:

function getComputerChoice() {
    const number = Math.floor(Math.random() * 3 + 1);
    if (number === 1) return "rock";
    else if (number === 2) return "paper";
    else if (number === 3) return "scissors"; 
}

let humanScore = 0;
let computerScore = 0;

function playRound(humanChoice, computerChoice) {
    if (humanChoice === null) {
        console.log("Game canceled. No choice made.");
        return; // Exit early
    };
    if (humanChoice === computerChoice) {
        console.log(`It's a draw! The score is still ${humanScore} for the human and ${computerScore} for the computer!`);
    } else if (humanChoice === "rock" && computerChoice === "scissors") {
        console.log("Rock beats scissors! Meatbag wins!");
        humanScore++;
        console.log(`Human score is now ${humanScore}. The computer's score is ${computerScore}.`);
    } else if (humanChoice === "rock" && computerChoice === "paper") {
        console.log("Paper beats rock. The machine wins!");
        computerScore++
        console.log(`Human score is now ${humanScore}. The computer's score is ${computerScore}.`);
    } else if (humanChoice === "paper" && computerChoice === "rock") {
        console.log("Paper beats rock! Meatbag wins!");
        humanScore++;
        console.log(`Human score is now ${humanScore}. The computer's score is ${computerScore}.`);
    } else if (humanChoice === "paper" && computerChoice === "scissors") {
        console.log("Scissors beats paper! Machine wins!");
        computerScore++;
        console.log(`Human score is now ${humanScore}. The computer's score is ${computerScore}.`);
    } else if (humanChoice === "scissors" && computerChoice === "paper") {
        console.log("Scissors beats paper! Meatbag wins! What a play!");
        humanScore++;
        console.log(`Human score is now ${humanScore}. The computer's score is ${computerScore}.`);
    } else if (humanChoice === "scissors" && computerChoice === "rock") {
        console.log("Rock beats scissors! Meatbag loses.");
        computerScore++;
        console.log(`Human score is now ${humanScore}. The computer's score is ${computerScore}.`);
    }
}

function declareWinner() {
    if (humanScore > computerScore) {
        console.log(`That's it, folks! Meatbag wins ${humanScore} to ${computerScore}!`);
    } else {
        console.log(`That's it, folks! Computer wins ${computerScore} to ${humanScore}!`);
    }
}

function playGame() {
    for (let i = 0; i < 5; i++) {
        let humanChoice = prompt("Ready to play? Rock... paper... scissors!");
        let computerChoice = getComputerChoice();
        console.log(`Meatbag picks ${humanChoice.toLowerCase()} and The Machine picks ${computerChoice}.`);
        playRound(humanChoice, computerChoice);
    } 
    declareWinner();
}

playGame();

I was reading about javascript scopes:

Global scope: The default scope for all code running in script mode.

Module scope: The scope for code running in module mode.

Function scope: The scope created with a function.

Can you explain what is script mode and module mode? And how to switch between these modes?