Ответы пользователя по тегу JavaScript
  • Почему возникает ошибка: "inputList.some is not a function"?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    где и что упускаю

    inputList.forEach(function (inputElement) {
      inputElement.addEventListener('input', function () {
        checkisValid(form, inputElement);
        toggleButtonAttribute(inputElement, buttonElement) // inputElement - не массив.
      })
    })
    Ответ написан
    2 комментария
  • Что не так с кодом?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    А открыть коносль и прочитать что не так?
    1.
    var body = document.getElementsByClassName("js-store-prod-all-text");
    Не нужно делать перенос строки.
    2. document.getElementsByСlassName - C кирилическая стоит.

    P.s.https://qna.habr.com/help/rules - ознакомьтесь как нужно оформлять вопросы.
    Ответ написан
    Комментировать
  • Как оптимизировать reduce?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Массив дат можно вынести наружу, что
    1) не будет пересоздавать переменную каждый раз.
    2) сделает решение более гибким
    let a =  [
       {
          "code":"CL",
          "tnved10":"7318158100",
          "2019":"33",
          "2020":"0.00",
          "2021":"0.00"
       },
       {
          "code":"CN",
          "tnved10":"7318158100",
          "2019":"7540001.66",
          "2020":"8164813.34",
          "2021":"20980774.64"
       }]
    let b = a.reduce((acc, current) => {
      [2019, 2020, 2021].forEach(i => acc[i] += Number(current[i]))
      return acc
    }, {'2019': 0, '2020': 0, '2021': 0});
    console.log(b)


    Типа так:
    const years = [2019, 2020, 2021]
    let b = a.reduce((acc, current) => {
      years.forEach(i => acc[i] += Number(current[i]))
      return acc
    }, {'2019': 0, '2020': 0, '2021': 0});


    Можно ещё сократить, но уже в ущерб читаемости.
    Или можно убрать инициализацию начального значения аккумулятора, перенеся проверку ключа на то, что это год внутрь. Правда это несколько увеличит код внутри reduce, но сделает более гибким код.
    Ответ написан
    Комментировать
  • Как инвертировать условие в JS?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    У вас Верно написано.
    Скобки не обязательны.
    if ( block1.textContent.includes('Слово1') && !block2.textContent.includes('Заголовок1') )

    Если не срабатывает - разметку block1 и block2 в студию
    Ответ написан
    Комментировать
  • Как я могу вывести в консоль все значения из объекта?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    А какие "все значения"? У Вас в каждом объекте area будет только одно значение под ключом areaText.
    Каждая следующая areaText перезаписывает предыдущую. Название ключа же одинаковое....
    Сделать массивом и перебрать. area.forEach(i => console.log(i))
    {
      img: 'img/explore/1.png',
      title: '2 Bedroom Apartments',
      area: [
        'Suite Area – 1,383 sq.ft',
        'Balcony Area – 886 sq.ft',
        'Total Area – 2,269 sq.ft'
      ]
    }
    Ответ написан
    Комментировать
  • Как из Promise получить данные в отдельную переменную?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Лирическое отступление

    <лирическое отступление>
    <!--
    Читаешь вопрос в общем списке вопросов и думаешь: "ну опять 25...".
    Открываешь вопрос, смотришь на код и думаешь: "а нет, что-то другое".
    Читаешь текст после кода и думаешь: "эх.. а было так близко..."
    -->
    </лирическое отступление>



    Код явно не Вы писали, да?
    Гуглите - асинхронный код javascript. Promises. Async\Await.
    Коротко:
    async function getData(link) {
      const data = await getCategories(link)
      console.log(data)
    }


    Либо дальше работать в цепочке промисов. Без "отдельных" переменных.
    Ответ написан
  • Как разделить функцию кнопки показать/скрыть пароль на отдельные кнопки?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Классическая ошибка не понимания как работают селекторы.
    При нажатии на кнопку нужно не все .password искать, а только те, что "рядом" с элементом, на котором произошло событие. в jQeury можно через .prev, prevAll, или наоборот взять .parent а в нём уже искать .password. Таким образом, будут искаться только те .password, которые на том же уровне что и элемент на котором был клик, либо в том же родителе, а не во всём документе.
    $('body').on('click', '.password__control', function () {
        var $this = $(this)
        var $closestPass = $this.prevAll('.password')
    		if ($closestPass.attr('type') == 'password') {
    			$this.addClass('view');
    			$closestPass.attr('type', 'text');
    		} else {
    			$this.removeClass('view');
    			$closestPass.attr('type', 'password');
    		}
    		return false;
    	});
    Ответ написан
    Комментировать
  • Как сделать список в списке?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Как сделать список в списке?

    Сделать список в списке.

    А циферки можно с помощью css счётчиков

    https://stackoverflow.com/questions/2729927/number...
    Ответ написан
  • Какую библиотеку использовать для постепенной анимации элемента при скролле страницы?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Ну конкретно такое не сложно сделать и самому - подписаться на скрролл, в зависимости от значения делать transform для слоёв.
    А так часто используют GSAP\ScrollMagic для сайтов с нестандартными анимациями при скроле
    https://greensock.com/scrollmagic/
    Написано только что
    Ответ написан
    Комментировать
  • Объясните, чем здесь является elem.onclick?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    В конструктор передаётся html элемент.
    Ему в onClick назначается одноимённый метод класса Menu.
    то есть в onClick элемента кладётся вот это:
    onClick(event) {
          let action = event.target.dataset.action;
          if (action) {
            this[action]();
          }
        }

    с забинженным контекстом на инстанс класса. Так как по умолчанию в обработчиках событий this равен элементу.
    А вот зачем там в _elemкладётся elem это загадка.
    Ответ написан
    Комментировать
  • В каком порядке будут отрисованы html-элементы на странице (всего 14 строк кода)?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Ну, чтож.. я не то чтобы прям хорошо в этом разбираюсь и браузеры постоянно работают над оптимизацией загрузки ресурсов и отрисовки, но, в целом, примерно так:
    0) html стримится, поэтому всё идёт неким потоком, а не по блокам.
    1) Браузер получил html, встретил в head ссылки на русурсы, пошёл их в параллель получать.
    2) Так как в скриптах может уже выполняться какая-то синхронная работа, то браузер дождётся загрузки и выполнения script1.
    3) Стили могут всё ещё грузиться, а могут и нет.
    4) Начинает строиться DOM. Браузер увидит картинку и пойдёт её загружать в паралель. Так как атрибутов width и height не указано (и если в style.css тоже не указано) то место под картинку зарезервировано не будет.
    5) Увидит script2, начнёт его загружать, пойдёт дальше строить DOM. (Скрипт выполнится как только загрузится и распарсится браузером. Так как стоит async - когда это произойдёт нам не известно. То есть может заблочить дальнейшее построение DOM, а может и нет. )
    6) Увидит script3, так как он без атрибутов, то будет дожидаться загрузки и выполнения в синхронном режиме. Велика вероятность что выполнится раньше script2.
    7) DOM готов, если CSS загрузился, то DOM и CSSOM мержатся в Render Tree -> происходит первичная отрисовка.
    8) DOM Content load
    9) Если под картинку всё же не было указано размера, и она ещё не загрузилась к этому моменту, то по факту её загрузки произойдёт перекомпановка и перерисовка, иначе только перерисовка. (всегда стоит стремиться сводить перекомпановки, известные так же как reflow, к минимуму и вызывать только перерисовки, известные как repaint)

    На деле всё сильно сложнее, браузер как-то там ещё бьёт на токены, но я так глубоко не знаю
    Ответ написан
    Комментировать
  • Как присвоить класс пустой ячейке?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    эм..
    ладно. Начнём с простого.
    Если бы не пустой пробел, то можно было бы через css решить с помощью псевдоселектора :empty.
    По поводу js кода, а что Вы проверяете в условии? Может ли html коллекция быть пустой строкой или строкой с пробелом?

    let cells = document.querySelectorAll('td');
    cells.forEach( cell => {
     if (!cell.textContent.trim()) { // если содержимое ячейки состоит только из пробелов или пустая строка, то добавляем класс active
        cell.classList.add('active')
      }
    })
    Ответ написан
    1 комментарий
  • Не могу написать promise, не работает?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    1. Вы сразу резолвите промис тем, что возвращает функциюя get_organizations.
    2. А функция у Вас ничего не возвращает. Соответственно, вы резолвите свой промис значением undefined.
    3. Что такое organizations в этой строчке result => console.log(organizations)?
    4. у jQuery есть своя система промисов - deferred объекты. На хабре есть статьи с примерами.
    Итого, причешим Ваш код:
    function get_organizations(ajaxurl) {
      var data = {
        action: 'get_organizations',
      }
      return jQuery.post( ajaxurl, data, function( resp ){
        console.log( 'response: ' + resp );
        const organizations = JSON.parse(resp);
        return organizations;
      });
    }
    
    get_organizations('https://some_url').then(organizations => console.log(organizations))
    Ответ написан
  • Зачем использовать eventbus в приложениях работающих в браузерах, если есть нативный JS custom event?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Шина событий позволяет реагировать на события независимо от места в иерархии всего дерева компонентов относительно друг друга.

    То есть эти сущности решают несколько разные задачи.
    СustomEvents - про генерацию кастомных событий для построения сложных компонентов.
    EventBus - про подписку на события и реакцию на их возникновение в любом разделе приложения, а не только по потоку вверх, как обычное всплытие события. По сути, event bus включает в себя понятие пользовательских событий. Только custom events это стандартизированная история в браузере, основанная на механизмах стандартных событий.
    Ответ написан
    Комментировать
  • Элемент был заблокирован, как открыть файл программно из js?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Из соображений безопасности нельзя насильственно вставлять файлы в инпуты и тригерить на них клик.
    Пока из известных мне - showOpenFilePicker() - позволяет вызвать диалоговое окно выбора файлов, но поддержка не полная.
    Ответ написан
    Комментировать
  • Как осуществить движение объекта в html с помощью JavaScript?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Ну Вы перемещаете на 50 пикселей, тут как не крути - плавно не будет.

    Есть 2 варианта:
    Перемещать через css transition. Тогда нужно указать для этого блока transition: left 0.3s linear
    Либо понизить шаг перемещения, а так же воспользоваться функцией requestAnimationFrame

    P.s. ну и не зачем постоянно искать элемент через querySelector. Найдите его один раз, сохраните в переменную и пользуйтесь.
    Ответ написан
    4 комментария
  • Как отключить повторное появление окна при помощи sessionStorage?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    А что хранит sessionStorage? Какой тип данных?
    Строку.
    Соответственно
    sessionStorage.getItem('hide') === true // всегда false
    Ответ написан
    6 комментариев
  • Как сделать так чтобы у фоток были свои собственные комментарии а не общие?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    deniskossaa, Ну давайте чуть чуть совсем подумаем.
    Скажем, Вы автовладелец. Как понять что автовладелец именно Вы, а не я? Мы же оба люди, так?
    Где то можно посмотреть, что именно эта машина привязана именно к Вам?

    Дело за малым. Создайте связь между картинками и комментарийями.
    Таким образом, сделаем массив элементов галлереи, каждый элемент которого - объект, у которого есть свойства: src - путь до картинки, comments - массив комментариев к этой картинке, id - уникальный идентификатор картинки для удобства.
    И далее делаем следующую структуру:
    const galleryItems = [
      {
        src: 'http://....' // абсолютный или относительный путь,
        comments: ['Комментарий по умолчанию'],
        id: 1
      },
      {
        src: 'http://....' // абсолютный или относительный путь,
        comments: ['Комментарий по умолчанию ко второй картинке'],
        id: 2
      }
    ]

    Ну собственно и всё. Дальше по факту добавления комментарий находим в массиве по id нужную картинку и добавляем в её поле comments новый комментарий.

    Для ускорения работы можно сделать хэш таблицу
    { [imageId]: galleryItem } // galleryItem - объект из массива
    и тогда по id из хэш таблицы считывать картинку и добавлять комментарий - не будет поиска по массиву на каждое добавление комментария.
    Ответ написан
    Комментировать
  • Удалить свойство или сделать его значение undifened?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    1) Не стоит вручную устанавливать undefined. Если значение нужно убрать - хорошая практика устанавливать null
    2) Не стоит использовать глобальные переменные без острой необходимости
    3) delete используют скорее не для обнуления значения, а для удаления свойства из объекта чтобы оно не участвовало в перечислении\не отправлялось на сервер и тд. Так что тут есть разница между delete и установкой undefined.
    Ответ написан
    Комментировать
  • Как отслеживать смену значений в объекте?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Есть два основных варианта:
    1) Использовать get и set
    2) использовать Proxy
    Ответ написан
    Комментировать