Сергей delphinpro

Совершенно непонятно, зачем на одной странице нужны 10 тыс фоток.
Во-первых, столько физически не поместится даже на три-пять экранов.
Во-вторых, человек в принципе не способен воспринимать такое количество информации одновременно.
Скорее всего, мне думается, это просто лента фотографий, которая "бесконечно" прокручивается для просмотра.
Вот из этого и нужно исходить.

Сложить список файлов в базу данных.
Загружать небольшое количество, ну скажем 50-100 изображений.
По мере прокрутки страницы подгружать еще сотню следующих. Предыдущие удалять. При прокрутке в обратную сторону подгружать предыдущие, а ушедшие из зоны видимости удалять.
И никакой нагрузки на браузер не будет, и визуально будет казаться, что все фото присутствуют на странице.

const type_input = document.getElementById("type_input").value.toLowerCase();
const type_names = ['фильм', 'сериал', 'мультсериал', 'мультфильм', 'аниме'];
const type_index = type_names.indexOf(type_input);
let type = 0;

if (type_index === -1) {
    alert('Добавьте или исправьте тип');
} else {
    type = type_index + 1; // значение для базы данных (если нужно 1-based)
}

велосипед не мой. вроде работает.

<button class="btn-chapter" data-chapter="1">Глава 1</button>
<button class="btn-chapter" data-chapter="2">Глава 2</button>
<button class="btn-chapter" data-chapter="3">Глава 3</button>
<button class="btn-chapter" data-chapter="4">Глава 4</button>
<button class="btn-chapter" data-chapter="5">Глава 5</button>

<div class="chapter" id="chapter-1"><h2>Глава 1: Основы Фотошопа - Растровая графика</h2></div>
<div class="chapter" id="chapter-2"><h2>Глава 2: Основы Фотошопа - Растровая графика</h2></div>
<div class="chapter" id="chapter-3"><h2>Глава 3: Основы Фотошопа - Растровая графика</h2></div>
<div class="chapter" id="chapter-4"><h2>Глава 4: Основы Фотошопа - Растровая графика</h2></div>
<div class="chapter" id="chapter-5"><h2>Глава 5: Основы Фотошопа - Растровая графика</h2></div>

.chapter {
  display: none;
}
.chapter.is-open {
  display: block;
}

document.addEventListener('DOMContentLoaded', function() {

  const allChapters = document.querySelectorAll('.chapter');

  const closeAllChapters = () => allChapters.forEach(el => el.classList.remove('is-open'));
  const openChapterById = id => document.getElementById(id).classList.add('is-open');;

  document.querySelectorAll('.btn-chapter').forEach(btn => {
    btn.addEventListener('click', () => {
      closeAllChapters();
      openChapterById(`chapter-${btn.dataset.chapter}`);
    });
  });

});

<button data-id="XXX1" class="copy-button">Copy</button>
<div id="XXX1"></div>
<button data-id="XXX2" class="copy-button">Copy</button>
<div id="XXX2"></div>
<button data-id="XXX3" class="copy-button">Copy</button>
<div id="XXX3"></div>

<textarea id="textarea-el"></textarea>

document.querySelectorAll('.copy-button').forEach(btn => {
  btn.addEventListener('click', () => {
    const id = btn.dataset.id;
    const text = document.getElementById(id).textContent;
  
    document.getElementById('textarea-el').value = text;
  });
});

Используйте метод .animate() и изменяйте любые параметры блока.

Обманите его. Просто расширьте видимую часть слайдера

.my-slider
  .my-slider-clip
    .my-slider-container 
      .swiper

.my-slider-clip { margin-inline: -50px; overflow: hidden; }
.my-slider-container { padding-inline: 50px; }
.ny-slider .swiper { overflow: visible; }

D этом случае и centerMode не нужен. Просто один видимый слайд slidesToShow: 1;.

Можно не вычислять положение, а чуть изменить принцип и верстку. Позиционировать кнопку с помощью CSS в отдельном контейнере, скриптом перемещать в нужный контейненр.

<div class="filter-item">
  <input type="checkbox">
</div>
<div class="filter-item">
  <input type="checkbox">
</div>
<div class="filter-item">
  <input type="checkbox">
</div>
<button id="apply-button">показать</button>

#apply-button {
  display: none;
}

.filter-item {
  position: relative;
}
.filter-item input:checked ~ #apply-button {
  display: block;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
}

const button = document.getElementById('apply-button');
document.querySelectorAll('.filter-item').forEach(item => {
  const cb = item.querySelector('input[type=checked]');
  cb.addEventListener('change', () => {
    if (cb.checked) {
      item.appendChild(button);
    }
  })
});

Останавливать всегда. Если условие не выполнилось, то снова запускать по таймауту 1000мс.
Ну и если интервал будет срабатывать только один раз, то можно использовать таймаут

let timerId;
const timer = () => {
    const text = document.querySelector('.Tag-module_content__uLsTI').textContent

    if(text.slice(0, -1)<(-52)){
        // ...payload
        console.log('Сработало условие');
        // Сработало, больше не требуется
    }
    else{
        rel();
        // Не сработало, запускаем снова через секунду
        timerId = setTimeout(timer, 1000);
    }
}

timerId = setTimeout(timer, 150);

В общем случае – никак.
Если использовать неразрывные пробелы между нужными словами (nbsp;) или переносы (br), то можно задать ширину как width: min-content или width: max-content. Но это частные случаи, не универсально.

В нативном ничуть не сложнее https://developer.mozilla.org/ru/docs/Web/API/Elem...

btn.addEventListener('click' e=>{
  const modal = e.target.closest('.modal[data-modal=cart]');
});