Ответы пользователя по тегу JavaScript
  • Как скрыть элемент при клике?

    m30w
    @m30w
    ~meow
    button.forEach((b, index) => {
      b.addEventListener('click', (e) => {
        b.classList.toggle('button--active');
        drop[index].classList.toggle('dropdown--active');
      })
    })
    Ответ написан
    Комментировать
  • Как импортировать переменную в промисе из файла?

    m30w
    @m30w
    ~meow
    https://developer.mozilla.org/ru/docs/Web/JavaScri...

    import('/modules/my-module.js')
      .then(module => {
        // Делаем что-нибудь с модулем
      })


    Resolve промиса должен возвращать Вам непосредственно модуль, т.е.

    import("node_modules/swiper/swiper.min.js').then(swiper=> {console.log(swiper)})
    Ответ написан
    Комментировать
  • Как отрисовать элемент на странице?

    m30w
    @m30w
    ~meow
    Для начала можно упростить Ваш код:
    function createSauseItem() {
        for (let i = 0; i < sauseName.length; i++) {
            let newItem = document.createElement('div');
            newItem.className = ('item sauce__item');
            const itemText = `<div class="item sauce__item">
                              ${i === 0 ? `<b><div class="item__promo sause-item__promo">NEW</div></b>` : i === 1 ? `<b><div class="item__promo sause-item__promo">ХИТ</div></b>` : 0}
                              <img draggable="false"
                              src="${(sauseImg[i])}"
                              alt="sause"
                              class="item__image sauce__image"
                              />
                              <div class="item__name sauce__name">${(sauseName[i])}</div>
                              <div class="item__descr desserts__descr">${(sauseDescr[i])}</div>
                              <div class="item__bottom_choise">
                              <button class="btnchoise sause__button">Выбрать</button>
                              <div class="item__costs sauce__costst" data-price="${(dataPrice[i])}">${(sauseCosts[i])}</div>
                              </div>
                              </div>`;
            newItem.innerText = itemText;
            sause.insertAdjacentHTML('beforeend', itemText)
        }
    }


    Советую использовать для работы какой-нибудь фреймворк, желательно просто подключить себе VueJS через CDN.

    Также можно использовать псевдокласс :nth-child, если изначально создавать карточки с теми же ХИТ/NEW, но display: none; и в :nth-clild1/2 давать display: block соответственному элементу.
    Ответ написан
    1 комментарий