• Необходимо сделать так, чтобы кликами можно было выбрать несколько продуктов из div и их суммарная стоимость при этом писалась бы в абзац?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега JavaScript
    Вы получаете значение span один раз при запуске скрипта и туда попадает первый span первого div.
    Вам же нужно при клике брать span внутри кликнутого элемента:
    div.addEventListener('click', function(e) {
        let span = this.querySelector('span');
    
        set.add(this.textContent); 
        let arr = [...set];
        el1.textContent = arr.join(', ');
        
        sum += +span.textContent;
        console.log(span.textContent);
        el2.textContent = sum;
    })
    Ответ написан
    Комментировать
  • Как вообще пользоваться .module.css в React?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    как сделать так что бы в одном html элементе был 2 класса например обычно className={isActive ? "page : ""page active"} можно добавить дополнительный класс а как сделать на .module ?

    import styles from 'Button.module.css';
    import cx from 'classnames';
    
    <button className={cx(styles.button, styles.disabled)}>Button</button>

    Гугл пробовали? Первые 2 строки Using CSS Modules in React, Css Modules by Example.
    Ответ написан
    Комментировать
  • Как удалить элемент из массива в local storage по его индексу?

    AlexanderK-A
    @AlexanderK-A
    UTC+10
    Извлечь из localstorage значение -> преобразовать из строки в массив JSON.parse() -> сделать что надо с массивом -> сохранить в localstorage JSON.stringify()
    Ответ написан
    Комментировать
  • По какой логике bind принимает только первый контекст?

    bingo347
    @bingo347 Куратор тега JavaScript
    Crazy on performance...
    Метод bind возвращает новую функцию, которая уже игнорирует свой контекст и передаёт тот, который запомнила.
    Если в коде, то это примерно так работает:
    Function.prototype.bind = function bind(ctx, ...args) {
        const originalFunction = this;
        return function (...args2) {
            return originalFunction.apply(ctx, args.concat(args2));
        };
    }
    Как видите, возвращаемая функция уже никак не использует свой this.
    Соответственно второй вызов bind его будет передавать в пустоту, однако может добавить аргументы.
    Ответ написан
    4 комментария
  • Почему пропадает before?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    z-index:1;

    Но его тоже нужно будет скейлить с картинкой

    Лучше заверните все в доп блок и его увеличивайте

    .block
      .wrapper
       ::before
       img
    
    .block:hover .wrapper {  transform }
    Ответ написан
    Комментировать
  • Является ли это корректной записью?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега JavaScript
    Не является. Массив используется на хранения списка значений, в нём нет никаких "имён".
    Значения с "именами" можно хранить либо в объекте, либо в специальном типе Map.

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

    let a = 3;
    let b = 15;
    
    let one = {};
    
    one.a = a;
    one.b = b;
    
    a = 42;
    
    console.log(one.a, one.b); // 3, 15
    console.log(a, b); // 42, 15


    let a = 3;
    let b = 15;
    
    let two = new Map();
    
    two.set('a', a);
    two.set('b', b);
    
    a = 42;
    
    console.log(two.get('a'), two.get('b')); // 3, 15
    console.log(a, b); // 42, 15
    Ответ написан
    Комментировать
  • Как исправить ошибку при подключении библиотеки?

    VoidVolker
    @VoidVolker Куратор тега JavaScript
    Dark side eye. А у нас печеньки! А у вас?
    В документации как бы есть инструкция:
    import autoAnimate from '@formkit/auto-animate'

    https://auto-animate.formkit.com/#usage
    Ответ написан
    Комментировать
  • Как хранить данные для кастомного блока code?

    Vindicar
    @Vindicar
    RTFM!
    БД тут абсолютно ни причём. Она хранит текст в том виде, в каком ты его туда поместил, вплоть до байта.
    Это браузеры по умолчанию сокращает отступы в ходе рендеринга HTML. Но есть теги вроде <pre>, которые отступы сохраняют. Также можно использовать CSS-свойство white-space со значениями pre или pre-wrap.

    Ответ написан
    Комментировать
  • Как корректно работать с react router?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Вы создали не правильную структуру компонентов React Router. < Router> должен быть размещен в самом верху относительно вложенности всех компонентов, обычно это в районе < App>. Так же, для навигации Вы используете href, когда должны использовать компонент React Router - Link.

    Это что такое?
    <Route exact path='/contacts' Component={Contacts} />
    // Component={Contacts} ???

    Попробуйте так (если App является корневым компонентом):
    import React from 'react';
    import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom';
    import './App.scss';
    
    import Header from './components/Header';
    import Service from './pages/Service';
    import Contacts from './pages/Contacts';
    import Login from './pages/Login';
    import Home from './pages/Home';
    
    function App() {
      return (
        <Router>
          <div className="App">
            <Header />
    
            <nav>
              <Link to="/">Главная</Link>
              <Link to="/service">Услуги</Link>
              <Link to="/contacts">Контакты</Link>
              <Link to="/login">Вход</Link>
            </nav>
    
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/service" element={<Service />} />
              <Route path="/contacts" element={<Contacts />} />
              <Route path="/login" element={<Login />} />
    
              <Route path="*" element={<NotFoundRoute/>} />
            </Routes>
          </div>
        </Router>
      );
    }
    
    // not fount route handler
    function NotFoundRoute() {
      return <div>Page not found</div>;
    }
    
    export default App;

    Header.js:
    import {Link} from "react-router-dom";
    
    function Header(props) {
      return (
        <>
          <header>
            // ...
    
            <Link to="/service">Услуги</Link>
            <Link to="/contacts">Контакты</Link>
    
            // ...
          </header>
        </>
      )
    }
    
    export default Header;
    Ответ написан
    Комментировать
  • Как отследить запросы?

    Alexandroppolus
    @Alexandroppolus
    кодир
    Ты в любом случае отрабатываешь только "второй" запрос, который 200. Редирект делается внутри xhr/fetch прозрачно для кода, их использующего.

    проблема возникает в обратной ситуации, когда надо, например, получить какие-нибудь заголовки ответа 3xx - до них не добраться.
    Ответ написан
    Комментировать
  • Нужно ли снова устанавливать Node.js для каждого нового проекта?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Попробую объяснить простым языком.

    0. Каждый проект по умолчанию имеет свои локальный пакеты (библиотеки), которые самостоятельно устанавливаются в корневую директорию node_modules, они устанавливаются на основе файла проекта package.json (инициализация).

    Предположим, что Вы не используете контейнеризацию, то:
    1. Ноду необходимо ставить глобально, например 18 версии. Что такое глобально? В таком случае, все Ваши проекты NodeJS смогут использовать эту ноду, хотя нода при этом не будет находиться локально ни в одном из Ваших проектов.
    2. Если все Ваши проекты используют исключительно ноду 18 версии, то дополнительную ноду ставить не требуется.
    ---
    3. Если у Вас проекты используют разные версии ноды, то рекомендую с нодой работать не на прямую, а через nvm (установка/удаление/переключение).
    ---
    4. Если Вы используете контейнеризацию, то обычно, нода+проект ставится в каждый контейнер.
    Ответ написан
    Комментировать
  • Что быстрее SQL или Javascript?

    ipatiev
    @ipatiev
    Потомок старинного рода Ипатьевых-Колотитьевых
    В общем, чтобы не издеваться над девушкой, объясним на пальцах.

    Во-первых, заголовок у вопроса чудовищно некорректный. Это все равно что спросить, "что быстрее - пылесос или стиральная машина?"
    Во-вторых, ответ на вопрос "производить ли обработку данных в БД или же запросить все данные в клиентское приложение и обрабатывать там" совершенно очевиден: обработку данных следует производить в общем случае только в БД. Она для этого и придумана. Чтобы обрабатывать значительные объемы данных.

    Да, js тоже "может" обрабатывать большие объемы данных.
    Но чтобы значительный объем данных обработать, его сначала надо передать, полностью забив канал между сайтом и базой
    Чтобы значительный объем данных обработать, его надо сначала проиндексировать. Причем делать это каждый раз, а не использовать уже имеющийся набор индексов
    Чтобы значительный объем данных обработать, надо иметь значительный объем памяти или упасть из-за её недостатка
    Чтобы значительный объем данных обработать в многопоточном режиме (а сайт как раз является многопоточной системой), все вышеперечисленное надо умножить на количество посетителей сайта - при каждом запросе перегонять весь массив данных, выделять память, индексировать, считать. Если же вы оставляете все данные в памяти приложения, то их тогда надо как-то синхронизировать с БД. То есть вы себе собираете кучу проблем на пустом месте.

    Несомненно, из любого правила есть исключения. И бывают ситуации, когда приходится считать в приложении.
    Но на вопрос в общем виде ответ будет совершенно однозначный. Не "может так, может сяк", а только в БД.
    Ответ написан
    9 комментариев
  • Как добавить сюда анимацию?

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

    .pic {
      display: inline-block;
    
    }
    
    .pic img {
      opacity: 1;
      transition: opacity 1s linear;  
    }
    
    .pic img.invisible {
      opacity: 0;
    }
    
    button {
      padding: 1em;
    }
    
    button.active {
      background: tomato;
    }


    document.body.addEventListener('click', e => {
      if (!e.target.matches('button')) return
      
      const img = document.querySelector('.pic img')
      
      img.classList.add('invisible')
      
      img.ontransitionend = () => {
        img.onload = () => img.classList.remove('invisible')
        img.src = e.target.dataset.src
        
        document.querySelectorAll('button').forEach(btn => btn.classList.remove('active'))
        e.target.classList.add('active')
      } 
    })


    P.s. недостатком данного кода является то, что загрузка следующей картинки начинается только после того, как первая исчезла. Это можно оптимизировать, но не всёж за Вас решать :-)
    А ещё не обязательно каждый раз искать элементы в DOM, если они не динамически генерируются.
    Ответ написан
    4 комментария
  • Почему не удаляется класс по setTimeout?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега JavaScript
    Классическая потеря this. Правда, странно, что при этом нет ошибок в консоли, когда вы на window пытаетесь removeClass вызвать.

    $(".box43z6r6QZ").click(function(){
       var $el = $(this);
    
        $el.addClass("hG8KlY3Q");
    
        setTimeout(function(){
            $el.removeClass("hG8KlY3Q");
        }, 1000);
    });
    Ответ написан
    Комментировать
  • Как правильно пройтись по всем элементам на странице?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    Пытаюсь через document.querySelectorAll но тоже выходит ошибка

    Надо лучше пытаться:
    <script>
    // Получаем все карточки товаров
    const cards = document.querySelectorAll('.cart');
    
    cards.forEach((card) => {
      const addToCartLink = card.querySelector('.buy_button');
      const inputElement = card.querySelector('.kolvo input');
      const plusButton = card.querySelector('.kolvo .plus');
      const minusButton = card.querySelector('.kolvo .minus');
    
      // Функция для обновления ссылки при изменении значения input
      const updateLink = () => {
        const inputValue = inputElement.value;
        const newLink = addToCartLink.getAttribute('href').replace(/q=\d+/, 'q=' + inputValue);
        addToCartLink.setAttribute('href', newLink);
      };
    
      // plus
      plusButton.addEventListener('click', () => {
        inputElement.stepUp();
        updateLink();
      });
    
      // minus
      minusButton.addEventListener('click', () => {
        inputElement.stepDown();
        updateLink();
      });
    
      // Обработчик события при изменении значения input
      inputElement.addEventListener('input', () => {
        updateLink();
      });
    });
    </script>
    <div class="cart">
    <a class="buy_button" href="/addtocart.php?id=387&q=1" rel="nofollow">Добавить в корзину</a>
    
    <div class="kolvo">
    <span class="minus">-</span>
    <input type="number" value="1" min="1">
    <span class="plus">+</span>
    </div></div>
    Ответ написан
    3 комментария
  • Как следить за версионностью в клиент-серверном приложении, в выпускаемых фичах продукта?

    Вы пытаетесь решить несуществующую проблему.
    1. Нет никакой проблемы в том что два разных приложения (клиент и сервер) имеют разную нумерацию.
    2. semver нужен только если у тебя есть какой-то контракт, который тебе нужно соблюдать. Если контракта нет - можно использовать просто номера релизов.
    Ответ написан
    3 комментария
  • Как устранить ошибку Cannot read properties of undefined (reading 'preventDefault')?

    Alexandroppolus
    @Alexandroppolus
    кодир
    Судя по всему, компонент Form, не представленный в вопросе, вызывает onSubmit без каких-либо параметров.
    Ответ написан
    Комментировать
  • Как присвоить функцию с аргументами, не вызывая её, лучше?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Ничего не лучше - показанные куски кода делают разное. Откройте консоль, выполните

    (function() {
      function func(arg) {
        console.log(arg, this);
      }
    
      let arg = 1;
    
      const f1 = () => func(arg);
      const f2 = func.bind(this, arg);
    
      arg = 2;
    
      f1();
      f2();
    }).call('hello, world!!');

    , подумайте над полученными результатами.

    Сами решайте, чего вам надо.
    Ответ написан
    Комментировать