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

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Ну было достаточно близко.
    - const targetBlock = element.closest('.perenesti-syuda');
    + const targetBlock = element.closest('.block').querySelector('.perenesti-syuda')


    perenesti-syuda - не один из родителей для perenosimiy-element - поэтому скрипт не работал, так как метод .closest проверяет сам элемент, а потом по очереди всех его родителей до root. Поэтому у Вас всегда было targetBlock - null. Вы бы легко это увидели, если бы научились отладке кода - https://learn.javascript.ru/debugging-chrome. (Отладка - один из самых важных навыков разработчика)

    Осталось выбрать подходящий метод вставки. У Вас appendChild - добавляет в конец. prepend - Добавит в начало.
    Ну или другой какой больше понравится - https://learn.javascript.ru/modifying-document
    Ответ написан
    1 комментарий
  • Как получить текст через несколько элементов?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Да вариантов много. например:
    qty[i].parentElement.querySelector('.price-amount')

    Возьмёт родителя для qty[i] и найдёт в нём первый элемент с классом .price-amount.
    В таком случае порядок вообще не важен, хоть перед инпутом, хоть вложите span в другой див. Главное чтобы родитель для qty[i] был родителем любого порядка и для price-amount
    Ответ написан
  • Почему не работает js код?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    if (newArr === [])

    Потому что это сравнение ссылок двух массивов, а не проверка массива на пустоту.
    [] - новый пустой массив. То есть в памяти выделилось пространство для нового массива.
    Даже если newArr тоже [] то это не одно и то же, потому что массивы это ссылочный тип данных. То есть для newArr так же выделена отдельная память для массива.

    Коротко: [] !== [] потому что области памяти разные для двух разных пустых массивов.

    ну и примитивная аналогия: два пустых одинаковых ящика это же не один и тот же ящик, верно?
    Ответ написан
    Комментировать
  • Как сделать функцию которая подгружает множество input файлов в разных местах?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    function getChangeListener(selectNameElement) {
      return function() {
        const fileName = this.files[0].name
        selectNameElement.innerText = filename.slice(0, 15)+ "...." + filename.substring(filename.length - 5);
      }
    }
    
    fileInput.addEventListener('change', getChangeListener(selectName))
    fileInput2.addEventListener('change', getChangeListener(selectName2))
    Ответ написан
    2 комментария
  • Почему данный код выдает ошибку?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Потому что внутри IIFE this - window.

    https://habr.com/ru/post/149516/

    Уточнение: в strict режиме (введен в es5) this по умолчанию - undefined
    а с es6 strict режим включается автоматически если использовать в коде любую синтаксическую конструкцию из es6+
    Ответ написан
    2 комментария
  • Почему консоль выдает ошибку в callback ф-ии?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Почему консоль выдает ошибку Uncaught ReferenceError: arr is not defined?

    А почему не должно?

    function f1(myFunc) {
       myFunc(arr, block);
    }
    
    function showArr(arr, block) {
       arr[3] = arr[3] * 10;
       block.innerHTML = arr.join('_');
    }
    
    f1(showArr(arr1, out1))

    Вы в f1 тут не функцию передаёте, а результат её работы, то есть undefined. Потому что если после названия функции есть круглые скобки, то сначала эта функция вызовется, отработает, и будет использован результат её выполнения. Так как явного return нет, то showArr вернёт undefined. Таким образом эта запись:
    f1(showArr(arr1, out1)) эквивалентна этой: f1(undefined) С той лишь разницей, что выполнится код внутри showArr..

    Но так как код выполняются справа налево, то внутри f1() не успевает дойти до ошибки undefined is not a function потому что внутри f1() сначала пытается найти переменную arr. А откуда ей там взяться? Её нет ни в аргументах функции f1(), ни в вышестоящей области видимости, так как там arr1.

    Ну а во втором примере Вы как раз передаёте функцию как аргумент, по ссылке, не вызывая её f1(showArr, arr1, out1); Поэтому ошибку не выдаёт.

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

    Опять же, а почему не должно? Вы изменяете массив arr1 по ссылке. То есть один и тот же массив изменяется и в showArr и в showArr2.
    function showArr(arr, block) { // arr = [1, 2, 3, 4, 5, 6, 7, 8]
       arr[3] = arr[3] * 10; // поменяли 4ый элемент, массив стал равен [1, 2, 3, 40, 5, 6, 7, 8]
    }
    
    function showArr2(arr, block) { // arr = [1, 2, 3, 40, 5, 6, 7, 8]
       arr[4] = arr[4] * 100; // поменяли 5ый элемент, массив стал равен [1, 2, 3, 40, 500, 6, 7, 8]
    }
    
    f1(showArr, arr1, out1); // и тут
    f1(showArr2, arr1, out2); // и тут Вы передаёте один и тот же массив. Массив это ссылочный тип данных. В обоих обработчиках будет один и тот же массив, а не 2 одинаковых
    Ответ написан
    4 комментария
  • Как исправить Uncaught TypeError: Cannot read properties of undefined (reading '0')?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    const getDaysWeekElement = (habitName, completed) => {
      const arg = (index) => ({ habitName, index });
      return weekDays
        .map((name, index) =>
          completed[index]
            ? ` <button class="checked" onClick="toggleDayButton(${arg(index)})">
    <img width="25" src="./assets/img/check.svg" alt="check" />
    </button>`
            : `<button onClick="toggleDayButton(${arg(index)})">${name}</button>`,
        )
        .join('');
    };
    
    const getHabitElement = ({ img, name, completed }) => `
    <div class="mb-8">
       <div class="habit-header">
          <img width="80" src="${img}" alt="habit-1" />
          <span class="font-semibold text-2xl">${name}</span>
       </div>
       <div class="habit-plan">
         ${getDaysWeekElement(completed)} // что принимает функция getDaysWeekElement?
       </div>
    </div>`;

    Спойлер: она принимает 2 аргумента, completed должен быть вторым.

    - ${getDaysWeekElement(completed)}
    + ${getDaysWeekElement(name, completed)}
    Ответ написан
  • Как получить текст тега?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Вы были близки.
    .closest() ищет исключительно вверх по дереву, начиная с самого элемента. А .text не является родительским элементом для картинки.

    Таким образом, нужно сначала найти общего родителя между картинкой и .text, и в этом общем родителе найти .text:
    -const message = event.target.closest('.text').textContent;
    + const message = event.target.closest('.message_container').querySelector('.text').textContent;
    Ответ написан
    Комментировать
  • Какое практическое примение имеет знание об разнице между инструкцией и выражением в JS?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    https://doka.guide/js/expressions-vs-statements/
    Это читали?

    Это как практическое применение знания между педалью газа и правилами дорожного движения.

    Если Вы инструкцию поставили в аргументы, то будет ошибка выполнения.

    зачем это объясняется

    Вам просто объясняется, что есть выражения, которые возвращают какое-то значение, которыми Вы оперируете, то есть сами данные, а есть инструкции, с помощью которых описывается логика выполнения программы, то есть порядок обработки данных.
    Ответ написан
  • Как вывести все данные из аjax?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    $('#result').html(data);
    Вы заменяете всю разметку новой.

    Программа минимум конкатенировать текущую разметку с новой - $('#result').html($('#result').html() + data)
    Программа максимум - освоить вставку контента. Например, https://api.jquery.com/append/
    Ответ написан
    2 комментария
  • Перемещение элементов в массиве с одной позицию на другую, как реализовать?

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

    "Москва не сразу строилась" ©

    На начальном уровне помогает сначала составить алгоритм на естественном языке, или псевдоязыке.
    Например:
    1. Нажал на кнопку
    2. Если кнопка вправо
     2.1 то нужно извлечь последний элемент из массива и вставить его в начало
     2.2 иначе извлечь первый элемент массива и вставить его в конец.


    С алгоритмом определились. Идём изучать методы массивов.
    https://learn.javascript.ru/array-methods

    Видим что:
    arr.push(...items) – добавляет элементы в конец,
    arr.pop() – извлекает элемент из конца,
    arr.shift() – извлекает элемент из начала,
    arr.unshift(...items) – добавляет элементы в начало.

    Отлично. Все они нам как раз и подходяд.

    Переписываем алгоритм на псевдокод
    onClickNext
     var last = array.pop()
     array.unshift(last)
    
    onClickPrev
      var first = array.shift()
      array.push(first)


    Ну и дело за малым. Переписать на js с обработчиками событий и тд.
    Ответ написан
  • Как изменить цвет текста в хедере при скролле на определенный блок?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Никогда такого не было, и вот опять...

    Нашёл за 2 минуты через местный поиск:
    https://qna.habr.com/q/751159

    Правила сервиса
    2.2 Убедиться в том, что в сети Интернет, и на страницах Сервиса в частности, отсутствуют ответы на данный вопрос. Специально для этого талантливые IT-специалисты создали и развивают поисковые системы Яндекс и Google.
    Ответ написан
  • Как взять следующий ключ в объекте?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Есть что то по типу next()

    Гуглите генераторы.

    А вообще порядок свойств в объектах не регламентирован и от браузера к браузеру может отличаться. Поэтому либо условный Object.keys().forEach, либо object.entries(), либо если ключи цифровые, то зачем объект? Может это все таки массив, а не объект, если порядок принципиален.

    А ещё посмотрите про for of
    Ответ написан
  • Замена IIFE ???

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Статья по теме: https://learn.javascript.ru/property-descriptors
    var globalVar = "Hello!";
    
    Object.defineProperty(window, 'test', {
        get() { return globalVar } // ну и другие необходимые дескрипторы, опущены для примера.
    });
    
    console.log(test); // "Hello!"
    globalVar = "world!";
    console.log(test); // "world!"

    P.s. но звучит так, будто Вы какую-то дичь делаете и нужно переосмыслить решение.
    Ответ написан
    4 комментария
  • Как вставить значение дата атрибута в value?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    1. .addEventListener ничего не возвращает. В переменной будет undefined. Соответственно, ни о каких дата атрубтах речи идти не может.
    2. Ну так вон Вы получаете dataset.code, берите и вставляйте его в value
    document.getElementById('form__code').value = this.querySelector('option[value="'+this.value+'"]').dataset.code

    В чём вопрос то?
    Ответ написан
    1 комментарий
  • Как вывести данные из бд переданные через форму ajax в div?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Ну вот у Вас же есть коллбэк succes, в нём Вы получаете данные и выводите их в консоль (правда получаете text, а выводите почему то data...).
    Делайте вывод вместо консоли в div.
    $('div').text(text)

    В чём конкретно вопрос?
    Ответ написан
    8 комментариев
  • Скрипт ajax перезагружает страницу?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Обрабатывать нужно не клик по кнопке сабмит, а событие сабмит на форме.
    И в обработчике делать preventDefault().
    form.on('submit', function(evt) {
      evt.preventDefault()
      $.ajax({})
    }


    Ну а если "религия" не позволяет делать правильно, то кнопка не должна быть типом сабмит, а должна быть type="button". Тогда клик по ней не будет отправлять форму и страница не будет перезагружаться.
    Ответ написан
  • Как разбить по тысячам число которое выводится в инопут?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    В глубь не копал, судя по всему сбоила функция потому что начинало в неё передаваться не валидное значение, типа "5 0000", хотя должно быть либо "5 000" либо "50 000". Поэтому добавил вообще удаление всех пробелов до голых "50000" - чтоб дальше уже всё отработало.
    - range.noUiSlider.set([this.value, null]);
    + range.noUiSlider.set([this.value.replace(/\s/g, ''), null]);
    Ответ написан
    1 комментарий
  • Как в swiper-pagination добавить нолики?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    В чём сложность открыть документацию и прочитать?
    formatFractionCurrent function(number)
    format fraction pagination current number. Function receives current number, and you need to return formatted value

    formatFractionTotal function(number)
    format fraction pagination total number. Function receives total number, and you need to return formatted value


    В чём сложность загуглить и найти такой же вопрос?
    https://qna.habr.com/q/535035
    Ответ написан
    1 комментарий