בעיה מוזרה ביצירת אלמנט div והצגתו

[אביי]

יש לי סקריפט js שיוצר אלמנט div על כל המסך שמציג תמונות מתחלפות עם כפתורי קדימה/אחורה, האלמנט הלז נוצר לאחר כ40 שניות שלא בוצעה לחיצה במסך, ובVSC עם live server זה פועל מצויין, וכן (אותו קוד בדיוק, גירסה ישנה יותר של האתר עצמו, ללא שינויים שמשפיעים) במקום אחר בשרת.

אבל כשאני מרים את הקוד משרת express חדש, הפונקציה רצה כרגיל, כולל ההדפסות לקונסול, והאלמנטים נוצרים כרגיל, התמונות נמשכות מהשרת ומתחלפות (רישום בקונסול), אבל הכל, ללא שעל המסך ניכר משהו מלבד העובדה שקליקים לא עובדים בגלל שכבת העל של הdiv ש"מסתירה" (בשקוף, כי התמונה לא מוצגת) את שאר התוכן,

למישהו יש רעיון?

[dovid]

אם השאלה היא מה החוש הבלשי שלי יעשה,
הייתי שומר בשם את המסמך שלא עובד, אם יש לו תלויות (CSS/JS) שומר גם אותם, ובודק אותם בVSCODE.

אם השאלה היא טכנית למה זה לא עובד, אז נא להביא קוד...

[אביי]

עדכון: מבדיקה נוספת שעשיתי כעת, זה עובד היטב בכל מחשב מלבד 2 המחשבים שעליהם אני כותב, (יש ביניהם סנכרון כלשהו, כך שזה מובן למה באג מור באחד משפיע גם על השני..), כך שהבעיה על פניו לא קשורה לתחום התכנות..

@dovid ניסיתי כבר לעשות את זה, שמרתי וזה עובד בדפדפן ובVSC היטב,

(אם זה יהיה רלוונטי אוכל לשלוח למי שצריך בפרטי לינק ישיר)

זה מקטע הקוד הרלוונטי

let INACTIVITY_TIMEOUT;
let INACTIVITY_TIMEOUT_LOGOUT;
let INACTIVITY_TIMEOUT_SHOW_BANNER_LOGIN;
let INACTIVITY_TIMER_LOGOUT;
let SLIDE_SHOW_TIMEOUT;
let IMAGE_DISPLAYED = false;

// zmani
let IS_SABBATH = false;


function resetAdDisplay(elementId) {

    console.log('resetAdDisplay. IMAGE_DISPLAYED: ' + IMAGE_DISPLAYED);

    clearTimeout(INACTIVITY_TIMEOUT);
    clearTimeout(SLIDE_SHOW_TIMEOUT);

    if (elementId !== 'bthLogoutBanner') {
        //hideBannerConnectionUser();
    }

    INACTIVITY_TIMEOUT = setTimeout(function () {
        if (!IMAGE_DISPLAYED && !IS_SABBATH) {
            console.log('displayAds: start');
            displayAds();
            IMAGE_DISPLAYED = true;
            //logout();
        }
    }, 40000);
}



let currentImageIndex = 0;
const images = [
    'resources/v322.jpg',
    'resources/ad.jpg',
];


function displayAds() {
    let adsContainer = document.createElement('div');
    adsContainer.id = 'ads-div';

    adsContainer.style.position = 'fixed';
    adsContainer.style.top = '0';
    adsContainer.style.left = '0';
    adsContainer.style.width = '100%';
    adsContainer.style.height = '100%';
    adsContainer.style.zIndex = '1900';
    adsContainer.style.display = 'flex';
    adsContainer.style.flexDirection = 'column';
    adsContainer.style.alignItems = 'center';
    adsContainer.style.justifyContent = 'center';

    let adsContent = document.createElement('div');
    adsContent.id = 'ads-content';
    adsContent.style.position = 'fixed';
    adsContent.style.top = '0';
    adsContent.style.left = '0';
    adsContent.style.right = '0';
    adsContent.style.width = '100%';
    adsContent.style.height = '100%';
    adsContent.style.maxWidth = '690px';
    adsContent.style.margin = 'auto';
    adsContent.style.zIndex = '1900';
    adsContent.style.display = 'flex';
    adsContent.style.flexDirection = 'column';
    adsContent.style.alignItems = 'center';
    adsContent.style.justifyContent = 'center';

    let currentImage = document.createElement('img');
    currentImage.src = images[currentImageIndex];
    currentImage.style.width = '100%';
    currentImage.style.height = '100%';
    currentImage.addEventListener('click', hideAds);


    let prevButton = document.createElement('button');
    prevButton.textContent = '❮';
    prevButton.onclick = displayPrevImage;

    let nextButton = document.createElement('button');
    nextButton.textContent = '❯';
    nextButton.onclick = displayNextImage;

    prevButton.style.position = 'absolute';
    prevButton.style.top = '50%';
    prevButton.style.width = '50px';
    prevButton.style.height = '50px';
    prevButton.style.transform = 'translateY(-50%)';
    prevButton.style.right = '18px';
    prevButton.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
    prevButton.style.border = 'none';
    prevButton.style.borderRadius = '50%';
    prevButton.style.color = 'rgba(0, 0, 0, 0.8)';
    prevButton.style.fontSize = '28px';
    prevButton.style.cursor = 'pointer';

    nextButton.style.position = 'absolute';
    nextButton.style.top = '50%';
    nextButton.style.width = '50px';
    nextButton.style.height = '50px';
    nextButton.style.transform = 'translateY(-50%)';
    nextButton.style.left = '10px';
    nextButton.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
    nextButton.style.border = 'none';
    nextButton.style.borderRadius = '50%';
    nextButton.style.color = 'rgba(0, 0, 0, 0.8)';
    nextButton.style.fontSize = '28px';
    nextButton.style.cursor = 'pointer';

    adsContent.appendChild(currentImage);
    adsContent.appendChild(prevButton);
    adsContent.appendChild(nextButton);

    adsContainer.appendChild(adsContent);

    document.body.appendChild(adsContainer);
    console.log('displayFullScreenImage');

    SLIDE_SHOW_TIMEOUT = setInterval(displayNextImage, 22000);
}


function displayNextImage() {
    currentImageIndex = (currentImageIndex + 1) % images.length;
    updateImage();
    console.log('displayNextImage');
}


function displayPrevImage() {
    currentImageIndex = (currentImageIndex - 1 + images.length) % images.length;
    updateImage();
    console.log('displayPrevImage');
}


function updateImage() {
    let currentImage = document.querySelector('#ads-div #ads-content img');
    currentImage.src = images[currentImageIndex];

    clearInterval(SLIDE_SHOW_TIMEOUT);
    SLIDE_SHOW_TIMEOUT = setInterval(displayNextImage, 22000);
}


function hideAds() {
    console.log('hideFullScreenImage');

    const adsContainer = document.getElementById('ads-div');
    if (adsContainer) {
        adsContainer.remove();
        IMAGE_DISPLAYED = false;

        resetAdDisplay('elementId');
    }
}



document.addEventListener('mousedown', function (event) {
    resetAdDisplay(event.target.id);
});
document.addEventListener('keypress', function (event) {
    resetAdDisplay(event.target.id);
});
document.addEventListener('touchstart', function (event) {
    resetAdDisplay(event.target.id);
});


resetAdDisplay('elementId');