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

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Комментировать
  • Как переписать код c jquery на js?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Ответ написан
    Комментировать
  • Canvas без position fixed? Можно ли?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Он так размещен только для того, чтобы оставаться в поле зрения, так как анимация проигрывается в соответствии со скроллом всей страницы. И это логично, иначе как вы увидите анимацию, когда этот элемент проскроллится за пределы экрана.
    Если вы хотите проигрывать анимацию только ползунком, то и фиксированное положение вам не требуется.
    Ответ написан
    Комментировать
  • Как сделать чтобы на последнем постере слайдер останавливался и не двигался дальше?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Посчитайте максимально возможное смещение. Оно будет равным суме ширин все слайдов и промежутков между ними, минус ширина контейнера слайдера.
    Если текущее смещение (-currentIndex * 220) будет превышать максимальное, то не применять его.
    Ответ написан
    Комментировать
  • Как сделать так чтобы при клике на p внутри div кликалась только div в JS?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Это сделает параграф невидимым для мышки
    div p {
      pointer-events: none;
    }


    А так вы можете определить по какому элементу сделан клик

    document.querySelector('div').addEventListener('click', e => {
      console.log(e.currentTarget); // Будет див, даже если кликнули на внутренний элемент
    });
    
    document.querySelector('div').addEventListener('click', e => {
      console.log(e.target.closest('div'));
      // Будет НАЙДЕН див, внутри которого, или на нем самом кликнули
    });
    Ответ написан
    Комментировать
  • Как задать или удалить класс конкретному дочернему элементу?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    containers.forEach((el) => {
      el.addEventListener("click", e => {
        e.currentTarget.querySelector('.element-3').classList.add('active');
      });
    });
    Ответ написан
    Комментировать
  • Как передать значение 0 из чекбокса?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    <input type="hidden" name="e_sale" value="0">
    <input type="checkbox" id="e_sale" name="e_sale" value="1">


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

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    function run(cb) {
         directionsService.route(route,
             function(response) {
                    // ...
                    let distKm = parseInt(dist / 1000);
                    cb(distKm);
                  }
        });
    }
    
    run(function(result){
      console.log(result);
    })


    с учетом ваших комментов:

    document.getElementById('btn-next').onclick = () => {
      run(function(result){
        console.log(result);
      })
    };
    Ответ написан
    1 комментарий
  • Как получать каждые 12 элементов из массива?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    let array = [1,2,3,4,5,6,7,8,9,10,11]
    const chunkSize = 3;
    let chunks = [];
    
    while (array.length > 0) {
      chunks.push( array.splice(0, chunkSize) );
    }
    
    console.log(chunks);
    Ответ написан
    Комментировать
  • Как сделать ограничения кликов по времени?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Вы можете использовать любое хранилище - БД, куки, локальное хранилище, сессию.
    Куки и localstorage в принципе можно поправить или вовсе очистить средствами браузера.
    БД или php-сессия в этом смысле более надежна.

    А сам принцип один, вне зависимости от того, какое хранилище вы будете использовать.
    1. Клик
    2. Проверить, сохранено ли время предыдущего клика
    3.1. Если нет, то разрешить голосование. И сохранить время.
    3.2. Если да, то проверить время.
    3.2.1. Если прошло достаточно, разрешить голосование и сохранить время
    3.2.2. Если нет, ничего не делать или сообщить пользователю, что он слишком увлекся.
    Ответ написан
    Комментировать
  • Как повесить событие, чтобы оно сработало на динамически созданном объекте?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    у вас неточность. в примере на jquery вы просто ловите событие
    а в примере на ваниле хотите инициализировать плагин.

    Это разные вещи.

    Поймать событие просто. Вешайте обработчик на document и смотритте что прилетело в event.target

    В случае с плагином, если он сам не поддерживает инициализацию на созданных в рантайме элементах, вам придется самостоятельно отслеживать появление новых узлов в DOM и по условиям инитить на них плагин. Но это в общем случае, для универсальности. В частном случае можно вклинится в процедуры открытия тех же попапов и там подключать маску. Например напрямую в клике кнопки "Открыть попап", или удобнее, в обработчике события "popup.opened" (условно, я не знаю, какие попапы у вас используются, но у большинства плагинов есть события открытия/закрытия).
    Ответ написан
    Комментировать
  • Как получить координаты элемента относительно его родителя?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    что то вы гоните

    https://api.jquery.com/position/
    .position()

    Description: Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.
    Ответ написан
    1 комментарий
  • Как вывести сумму двух текстовых полей?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Это базовые особенности языка. Объясняются в любом учебнике.
    В джаваскрипт оператор "+" является двойственным. В зависимости от ситуации он может быть как оператором сложения (чисел), так и оператором конкатенации (склеивание строк).

    Здесь оба операнда являются строками, поэтому знак плюс будет оператором конкатенации.
    let s1 = '1';
    let s2 = '2';
    console.log(s1 + s2); // '12'


    Здесь оба операнда являются числами, поэтому знак плюс будет оператором сложения.
    let n1 = 1;
    let n2 = 2;
    console.log(n1 + n2); // 3


    Могут быть ситуации, когда один из операндов будет числом, а другой – строкой.
    В этом случае числовой операнд будет преобразован в строку
    let s1 = '1';
    let n2 = 2;
    console.log(s1 + n2); // '12'


    Когда вы получаете значения инпутов со страницы, они всегда будут строчного типа, во всех ситуациях. Поэтому, прежде чем выполнять над этими значениями математические операции, их нужно преобразовать в числа
    parseInt() - в целое число
    parseFloat() - в число с плавающей точкой
    Number() - можно еще так
    +n2 - или так (это уже своего рода хак, основанный на приведении типов)

    Number(element1.innerHTML) + Number(element2.innerHTML)


    Все подробности здесь https://learn.javascript.ru
    Ответ написан
    Комментировать
  • В чем отличие this.sort от this[sort]?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    const sort = 'other';
    const any  = 'other';
    
    const obj = {
      sort: 'my name is sort',
      other: 'my name is other',
    
      test() {
        console.log(this.sort);  // 'my name is sort'
        console.log(this[sort]); // 'my name is other'
        console.log(this[any]);  // 'my name is other'
      }
    }
    
    obj.test();
    Ответ написан
    Комментировать
  • Нужно правильно реализовать гамбургер. Что можно сделать?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    У вас принцип открытия закрытия построен на изменении состояния чекбокса.
    Вот его вам и надо изменять в скрипте, а не трогать стили напрямую.

    const toggler = document.getElementById('menu-toggle');
    const menuLinks = document.querySelectorAll(".menu-link");
    for (let el of menuLinks) {
      el.addEventListener("click", () => {
        toggler.checked = !toggler.checked;
        // toggler.checked = false; // или так
      });
    }
    Ответ написан
    1 комментарий
  • Зачем в данной функции нужны круглые скобки?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Стрелочная функция может содержать несколько инструкций. И тогда ее тело обрамляется фигурными скобками. Также она может содержать одну инструкцию и неявно возвращать результат.
    В данном случае ваша функция имеет вид

    f = () => {
      return {
        ...fields
      }
    }


    Однако здесь всего одно выражение в теле функции и его можно сократить

    Мы не можем написать так

    f = () => {
      ...fields
    }


    Будет ошибка синтаксиса. Но можем обернуть возвращаемый объект в круглые скобки

    f = () => ({
      ...fields
    })
    Ответ написан
    Комментировать
  • Как открыть блок под кнопкой на которую был клик?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Нужно сделать простую разметку

    <div class="body">
      <button class="button">B1</button>
      <div class="content">Content 1</div>
    
      <button class="button">B2</button>
      <div class="content">Content 2</div>
    
      <button class="button">B2</button>
      <div class="content">Content 2</div>
    </div>


    А потом раскладку делать флексами+order или гридами. И медиа запросы к любому варианту
    Ответ написан
    Комментировать
  • Какой самый простой способ собрать PDF файл с данными из БД?

    delphinpro
    @delphinpro Куратор тега PHP
    frontend developer
    Самый простой способ – вывести данные на страницу и отправить эту страницу на печать в пдф файл.
    Способ посложнее – использовать какую-нибудь библиотеку для создания пдф. Например mpdf.
    Ответ написан
    3 комментария
  • Как сохранить старое значение для input type file?

    delphinpro
    @delphinpro Куратор тега PHP
    frontend developer
    никак этого ни сделать.
    Обычно в таких случаях выводят ID уже загруженной картинки из базы плюс возможно сама картинка тегом img или просто ее название. А в бэке уже смотрим, если прилете ID при сохранении то смотрим еще в $_FILES, если там новая картинка, то меняем, иначе просто ничего не трогаем. Если ID не прилетел, значит это первая загруженная картинка, просто ее сохраняем.
    Ответ написан
    Комментировать
  • Как получить родительский элемент с определенным CSS-свойством?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    определять position относительно блока с position: relavive

    Вот об этом и нужно было спрашивать, а не выдумать что-то...

    Для определения позиции элемента в jquery уже есть методы.

    https://api.jquery.com/offset/
    https://api.jquery.com/position/
    Ответ написан
    8 комментариев