один и тот же скрипт анимации js не работает в разных местах на странице

Question

не работает анимация - если я просто копирую два блока. Мне нужно что бы анимация работала во многих местах на странице, таких блоков у меня будет очень много - наверное больше 30 штук на странице, но при копировании - анимация не работает. код

    <body>
    <!-- partial:index.partial.html -->
    <div class="dot-matrix">
        <div class="flex"> 
            <div>ЯЗЫК ПЕРЕВОДА</div>
            <div><br></div>
            <div><br></div>
            <div><br></div>
            <div><br>Английский</div>
        </div>
        <ul id="locations"></ul>
    </div>
    <!-- partial -->
      <script  src="./script.js"></script>
    
    </body>
    
    <script>
    const jsonData = [
 {"text":  "ТАРИФ-ПРОСТОЙ..........350/400"},
  {"text": "ТАРИФ-ПРОСТОЙ+.........400/450"},
  {"text": "ТАРИФ-ОСОБЫЙ...........500/550"},
  {"text": "ТАРИФ-ЭКСКЛЮЗИВ........700/900"},

  // ... add more entries as required
];

// Since we aren't fetching data anymore, we can directly process jsonData
jsonData.forEach(item => {
    const li = document.createElement('li');
    li.setAttribute("data-original", item.text);
    li.textContent = item.text;
    document.querySelector("#locations").appendChild(li);
});

animateLocations();

function randomString(length) {
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    let result = '';
    for (let i = 0; i < length; i++) {
        result += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    return result;
}

function convertToSpans(text) {
    return [...text].map(char => `<span>${char}</span>`).join("");
}

function animateLocations() {
    const locations = document.querySelectorAll("#locations li");

    locations.forEach(location => {
        location.innerHTML = convertToSpans('ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'.slice(0, location.getAttribute("data-original").length));
    });

    let indices = [...Array(locations.length).keys()];
    indices.sort(() => Math.random() - 0.5);

    indices.forEach((locationIndex, index) => {
        const location = locations[locationIndex];
        setTimeout(() => {
            const originalText = location.getAttribute("data-original");
            location.innerHTML = convertToSpans(originalText);

            const spans = location.querySelectorAll('span');
            let timer = setInterval(() => {
                spans.forEach(span => {
                    span.textContent = randomString(1);
                });
            }, 100);

            setTimeout(() => {
                clearInterval(timer);
                let counter = spans.length - 1;
                const buildText = setInterval(() => {
                    if (counter >= 0) {
                        spans[counter].textContent = originalText[counter];
                        counter--;
                    } else {
                        clearInterval(buildText);
                    }
                }, 100);
            }, 1500);
        }, 500 * index);
    });
}

window.addEventListener("resize", AutoScale); //Масштабируем страницу при растягивании окна

AutoScale(); //Масштабируем страницу после загрузки

function AutoScale()
{
    let width = window.screen.width; //Ширина окна
    //Если вы хотите проверять по размеру экрана, то вам нужно свойство window.screen.width

    if(width > 1280)
    {
     ChangeScale("big");
    }
    else if(width <= 1280 && width > 720)
    {
     ChangeScale("normal");
    }
    else if(width < 720)
    {
     ChangeScale("small");
    }
}

    </script>
    <style>
    
    :root {
            /* Farbvariablen */
            --background-color: black;
            --dot-matrix-bg-color: #222222;
            --dot-matrix-font-color: #FFFFFF;
            --dot-matrix-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.3);
    
            /* Font & Spacing Variablen */
            --font-family: 'Unbounded', cursive;
            --font-size: 1rem;
            --letter-spacing: 4px;
            --span-width-height: 1.125rem;
            --span-margin-right: 2px;
            --dot-matrix-padding: 4rem;
            --list-item-margin-bottom: 1rem;
            --flex-gap: 4rem;
            --flex-margin-bottom: 1rem;
        }
    
    div {font-family: 'Unbounded', cursive;
     font-size: 14px;
      display: inline-block;
    
    }
        .dot-matrix {
            font-family: var(--font-family);
            font-size: var(--font-size);
            letter-spacing: var(--letter-spacing);
            color: var(--dot-matrix-font-color);
            background-color: var(--dot-matrix-bg-color);
            padding: var(--dot-matrix-padding);
            border-radius: 0,5rem;
            box-shadow: var(--dot-matrix-shadow);
                        }
    
        .dot-matrix span {
            display: inline-block;
            width: var(--span-width-height);
            height: var(--span-width-height);
            border: 1px dotted var(--dot-matrix-font-color);
            line-height: var(--span-width-height);
            text-align: center;
            margin-right: var(--span-margin-right);
        }
    
        .dot-matrix ul {
            list-style: none;
            padding-left: 0;
            margin: 0;
        }
    
        .dot-matrix li {
            margin-bottom: var(--list-item-margin-bottom);
                }
    
        .dot-matrix .flex {
            display: flex;
            justify-content: space-between;
            gap: var(--flex-gap);
            margin-bottom: var(--flex-margin-bottom);
            text-align: center;
        }   
        </style>

БЛОГ НА HUSL

один и тот же скрипт анимации js не работает в разных местах на странице

Ответы (0 шт):