Ответы пользователя по тегу JavaScript
  • Как пофиксить вызов JS из HTML?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    CEO iAmStudio, предприниматель.
    Тебе Codepen же в консоли и отвечает, в чем причина.

    1. Переменные не были объявлены должным образом.
    2. Ты пытался словить class, как ID

    https://codepen.io/i-am-studio_ru/pen/OJMLLaK
    Ответ написан
    5 комментариев
  • Если я создаю кастомный элемент, стили лучше применять к тегу или к классу?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Мы же ведь о компонентах, а не от балды накатанном теге? Впрочем не суть важно.

    1. Не стоит завязывать в описании стилей на теге, так как ты себе таким образом стреляешь в ноги. Это все хорошо освоено в БЭМ-методологии, правда я не помню, чтобы кто-либо явно где-то писал, почему классу круче тегов. Если кратко, то это свобода, которая ограничивается лишь методологией и больной фантазией.
    2. IE умер, помянем.
    3. У меня к сожалению нет статистических данных, поэтому тут будет больше на общих знаниях и ощущениях: чтобы снизить риск быть непонятым, не стоит использовать малопупулярные подходы, а пользоваться простой семантикой (а иной раз «дублировать контент»), к тому же тег для спойлера есть.
    Ответ написан
  • Как из функции передать переменную в функцию?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    CEO iAmStudio, предприниматель.
    Не страдать фигней и подойти к этому так.
    Ответ написан
  • Как сделать плавное выдвижение шапки сайта?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Анимация на стороне CSS достигается через transition (в данном кейсе). До кучи можно почитать в принципе про переходы.
    Ответ написан
  • Как отключить кнопку "купить", на которую было произведено нажатие?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    CEO iAmStudio, предприниматель.
    Передаваемый параметр e в функцию это event. У него есть свойства event.target (т.е. прямо в твоем случае e.target). Это и есть элемент, на который ты нажал. Через него и обращайся внутри функции.
    Ответ написан
    Комментировать
  • Почему при innerText функция не ставит пробелы?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    CEO iAmStudio, предприниматель.
    Почти все теги обрезают строки. Для вывода сырого текста используются теги типа pre. В него и выводи свою портянку.
    Ответ написан
    Комментировать
  • Как получить первый объект объекта объекта?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    CEO iAmStudio, предприниматель.
    1. Получая массив ключей и обращаясь к объекту через первый ключ.
    2. Либо с другой стороны но те же яйца.
    Ответ написан
    Комментировать
  • Как можно сделать шкалу. Ее индикатор зависит от цифры?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    1. Если на шкалу необходимо влиять, то использовать можно progress с последующей стилиазцией.
    2. Значения заносить, проверять при изменении с помощью JS (в любом случае), для того, чтобы гонять между отображением в виде значения после запятой (чисел с запятой в математике на JS не существует) и значением в proress (которое скорее всего будет от 0% до 100%).
    3. Фон, если он всегда ровным градиентом идет (от нуля к 50% и до 100%) можно залить просто фоном градиентом, если он имеет более сложную структуру, то вычислять и по параметрам рисовать все тот же линейный градиент (еще в принципе радиальный можно).
    Ответ написан
    Комментировать
  • Как избавится от сотен товарных карточек в html коде?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Повторяющиеся элементы выводятся с помощью циклов, на уровне бэкенда или фронтенда.

    У тебя в руках скорее всего либо реально очень старый сайт, который писали руками с копированием, либо просто результат работы бэкенда.

    В php это выглядело бы как-то так:
    ...
    foreach (&items as $item) { ?>
    [HTML-тело карточки товара со вставленными параметрами вида $item->title]

    Могут быть как прямые выводы на ЯП, так и с помощью шаблонизатора.

    Итого, если у тебя проект с бэкендом, или фронтом, которые позволяет рисовать в цикле из базы или файла, используй язык. А если нужно просто 1 раз занести список, то можно это сделать в файле и обратить к генератору статики, например Jekyll.
    Ответ написан
    Комментировать
  • Есть ли более простой способ назначить стиль незагруженным изображениям?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Тебе стоит копнуть в обсерверы типа такого и такого. Либо пойти по пути наименьшего сопротивления и заюзать bind в либе jQuery, который умеет ловить события на элементах, которые досоздаются после загрузки DOM. Но это неточно, я несколько лет, как не имел дело с jQuery.
    Ответ написан
    Комментировать
  • Как сделать форму выбора(марка автомобиля,модель итд) как на сайте drom.ru(описание внутри)?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    1. Есть JS-фрейморки, которые упрощают жизни в постройке такого, например Vue (в проекте же может быть использован React или Angular).
    2. Форма должна иметь id (value) для БД и значение для пользователя (внутри тега option), для адекватного обмена данными и записи связей в БД. В референсе, кстати, эмуляция динамическая, сам selet со значениями скрыт.
    3. На уровне данных для JS → объект, на уровне БД → связи один ко многим.

    Кстати, так как марки автомобилей заранее известны, то это можно даже не заносить в базу, а хранить просто в объекте в конфигах, но по правде говоря вариант так себе, в базе проще объявления вязать по ID с марками.
    Ответ написан
  • Конфигуратор на сайте?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Речь же о графическом редакторе, эдаком визивиге для заданного набора параметров. С ними все просто, рисуются с помощью JS и в нормальном подходе к разработке параметры, которые ты задаешь во всплывающих формах (дизайн не важен, речь о сути элемента интерфейса) сохраняется в объекте, к примеру:
    {
        block: {
            borderColor: 'red',
            borderWidth: '15'
    ....


    Который в дальнейшем преобразуется в стили, инлайновые или отдельным файлом, тут как бэк написан.
    В редакторах сайтов, таких, как тильда и юкоз (насколько я помню) оно еще и отображается сразу.

    Есть подобные редакторы и на WP, например в Unyson-е: принцип тот же, оформление попроще, блоками.

    Таких редакторов много, у этого, к примеру, можно сразу посмотреть сконфигурированный объект.

    Другая же категория → надстройка над сайтом, их задача — жестко, через important-ы поменять стили здесь и сейчас. Иногда, переключить тему, де-факто вызвать функцию бэка, которая это сделает, визуально же ты увидишь кубики с цветами.
    Ответ написан
  • Как на форму регистрации установить цель в Яндекс Метрике типа JavaScript-событие?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    CEO iAmStudio, предприниматель.
    1. В одну строку события (onsubmit) можно передать через точку с запятой несколько вызовов (как классы).
    2. Не уверен, что после return-а будет работать, вообще на кой он тут, тут же прямо вызов функции, перед ней не нужны ретурны, и как результат можно прямо в функцию зашить вызов функции Я.Метрики.
    Ответ написан
    2 комментария
  • Как изменить скорость анимации взависимости от количества изображений?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    CEO iAmStudio, предприниматель.
    Я так понял, речь о том, чтобы задавать timeFadeOut. Дальше я так понял ты не листаешь, а переключаешь отображение через fade-функцию жиквери.

    Итого, если тебе необходимо посчитать скорость переключения всех изображений, то смело считай их количество через document.querySelectorAll([идентификатор]) и эталонную скорость дели на количество, добытое через length.

    let images = document.querySelectorAll([идентификатор]);
    let imagesCount = images.length;
    let speed = timeFadeOut / imagesCount;


    Но как я понимаю, нужно сделать скорость от текущего, т.е. если ты в середине, то скорость проходки для всех будет не актуальна. Тогда ты можешь взять индекс текущего во вьюпорте или просто активного изображения и при движении вверх делить эталонную скорость на индекс, а вперед → разница количества элементов и индекса.

    В идеале бы код увидеть в действии, стоило залить его, например на https://codepen.io/, поэтому скорее всего мой ответ будет неточен, но ключи все есть.
    Ответ написан
    4 комментария
  • Как привязать фон к центру?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    Крайне кривая верстка и нежизнеспособная. В ее рамках можно сделать так.
    Ответ написан
    Комментировать
  • Изменить background для label у input type="radio"?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    CEO iAmStudio, предприниматель.
    label должен находится после input-а, тогда конструкция селекторов: input:checked + label позволит такое совершить. Либо завернуть текст в span и по то же конструкции, но вместо label обращаться к input:checked + span.

    Либо по клику на чекбокс, меняй класс родителя на модификатор с необходимым фоном. Грубо, так:
    if (element.checked) {
        parent.classList.remove('classname')
    } else {
        parent.classList.add('classname')
    }
    Ответ написан
    2 комментария
  • Скрипт для открытия страницы хаотично?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    CEO iAmStudio, предприниматель.
    Ответ написан
    Комментировать
  • Перебор объекта?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    CEO iAmStudio, предприниматель.
    Ты перебираешь массив значений, что в принципе ведет к такому выстрелу себе в ногу. Так как последовательность без break решает, как будет вести себя скрипт за тебя.

    Я бы рекомендовал двинуть хотя бы в эту сторону. Чуть больше безопасности от самого себя.
    Ответ написан
    Комментировать
  • Как удалить класс при клике на body?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    CEO iAmStudio, предприниматель.
    Тебе необходимо реализовать механизм всплытия и перехвата.

    Обновление:
    Грубый пример можно глянуть тут. Грубый потому что не учитывает вложенные элементы, от него надо всплывать.
    Ответ написан
  • Сортировка массива?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    CEO iAmStudio, предприниматель.
    У JS есть великолепные инструменты для работы с массивами, один из них → .sort(), который позволяет не перебирать ручками все ключи со значениями.

    А для сравнения двух и более достигается с помощью оператора ИЛИ (||). Таким образом:
    array.sort((a,b) => { return a.z - b.z || a.y - b.y })

    Где z и y ключи объекта в массиве, а разница → «направление» смещения.

    ЗЫ: в зависимости от типа полей их можно суммировать для достижения определенных результатов, к примеру развернув дату и добавив ее к строке:
    array.sort((a,b) => { 
        if('20200520a' < '20200520б'){ 
            return 1;
        }
        else {
            return -1;
        }
    })

    Последний вариант требует тщательного изучения принципа работы. Так же рекомендую сразу начинать присматриваться к .map().
    Ответ написан
    Комментировать