Ответы пользователя по тегу JavaScript
  • Как правильно вызвать функцию и отрисовать её содержимое в условии цикла без привязки к итерациям?

    @alexalexes
    Вы назвали переменную childBlock, а выбираете в нее все узлы - все выпадающие списки всех child.
    let childBlock = parentBlock.querySelectorAll('.select');

    Тогда уж делайте вложенный перебор. В этом случае будет понятно, на каком уровне foreach какие проверки вставлять.
    let childBlocks = parentBlock.querySelectorAll('.child');
    childBlocks.forEach(child) =>
    {
    // контекст одного элемента child
      let childSelects = child.querySelectorAll('.select');
      childSelects.forEach((select) =>
      {
       // контекст одного элемента select
      ...
       // конец контекста одного элемента select
      });
    // конец контекста одного элемента child
    });

    Точнее, вообще не так.
    Зачем вы выбираете селекты из всего parentBlock, когда нужен контекст текущей карточки.
    Селекты по текущей карточкe, в которой кликнули get, можно получить так:
    let childSelects = e.target.querySelectorAll('.select');
     childSelects.forEach((select) =>
      {
       // контекст одного элемента select
      ...
       // конец контекста одного элемента select
      });
    Ответ написан
    Комментировать
  • Как из угла получить вектор?

    @alexalexes
    {cos(угол), sin(угол)} - так получите координаты конечной точки вектора на единичной окружности относительно начала координат. Если нужен другой радиус, то умножьте координаты на радиус. Если нужно добавить смещение вектора, то добавьте к координатам смещение.
    Ответ написан
    Комментировать
  • Как передать изображение с Wacom STU-430 на canvas JS?

    @alexalexes
    Ну, технически возможно синхронизировать процесс рисования на планшете с canvas.
    https://habr.com/ru/post/126775/
    У wacom вроде как есть плагин для поддержки сопряжения с браузерами.
    Но сама концепция не универсальна, так как чтобы поднять функционал, нужно иметь проприетарный софт в системе, который ставится исключительно ручками (привет ушедшим из браузеров flash player и java applet).
    PS: Вот инструкция, как это развернуть у себя в системе:
    developer-docs.wacom.com/stu/docs/deployment
    Ответ написан
    Комментировать
  • Как изменить mime type у получаемого js файлы через import?

    @alexalexes
    Тип файла вы получили, теперь нужно отдать его заголовком.
    $mime_type = mime_content_type($_SERVER['DOCUMENT_ROOT'] . '/assets/js/@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter.js');
    header( 'Content-type: '.$mime_type);
    Ответ написан
  • Как обфусцировать JavaScript с минимальными усилиями?

    @alexalexes
    Лучшим обфускатором является разработчик, который принципиально не придерживается практик ООП, MVC или даже соглашениям по именованию переменных. Все, что затрудняет кодревью - это то, что надо для обфускации кода.
    Ответ написан
    Комментировать
  • Как добавить в js стили классам как в css?

    @alexalexes
    Можно не пробегать по DOM дереву, подставляя inline стили элементам. А модифицировать сами CSS правила в итоговом style всей страницы. См. Adding and Removing Rules.
    Ответ написан
    2 комментария
  • Как расположить точки на окружности?

    @alexalexes
    В вашем примере используется карусель, у которой прописаны стартовое положение:
    state = {
        carouselDeg: 17,
        itemDeg: -17,

    carouselDeg - поворот элементов основной окружности в градусах. Опытным путем можно понять, что оно задается как:
    (360 / кол-во элементов) / 2
    Элементов у вас 10, значит, должно быть 18 градусов, а не 17 (можно заметить, что с 17 неровное начальное смещение).
    itemDeg - вращение контента внутри одного элемента. Если хотите, чтобы контент всегда был обращен горизонтально, то берете ту же формулу со знаком минус.
    Далее, есть такие методы:
    next = () => {
        this.getIdItems(true);
        this.setState(state => ({
          carouselDeg: state.carouselDeg - 36,
          itemDeg: state.itemDeg + 36
        }));
      };
    
      prev = () => {
        this.getIdItems(false);
        this.setState(state => ({
          carouselDeg: state.carouselDeg + 36,
          itemDeg: state.itemDeg - 36
        }));
      };

    Число 36 - это шаг вращения, он вычисляется как:
    360 / кол-во элементов
    В принципе все, что нужно знать для правильной ориентации карусели.
    Прорисовкой элементов карусели занимается сама библиотека, позиции элементов на плоскости вам вычислять не нужно.
    Ответ написан
    Комментировать
  • Есть ли хорошие конверторы из jquery в js?

    @alexalexes
    В вашем случае лучший конвертер - компетентный программист.
    Ответ написан
    Комментировать
  • Заполнить окно базовой авторизации через JavaScript?

    @alexalexes
    Как вариант, ajax-ом авторизоваться и вызвать обновление страницы.
    var request = new XMLHttpRequest();
        request.open("POST", "test.ru", false);
        request.setRequestHeader("Authorization", "Basic " + btoa(user + ":" + password));  
        request.loaded = function()
        {
          window.location.reload();  // обновление страницы
        };
        request.send();
    Ответ написан
    Комментировать
  • Как выполнить функцию после click?

    @alexalexes
    Вместо click берете более тонкое по срабатыванию событие - mouseup.
    Не забудьте, что у сенсорных устройств есть свой аналог этого события - touchend.
    Ответ написан
    Комментировать
  • Возвращает [object HTMLDivElement].?

    @alexalexes
    let div = document.createElement('div'); // создаем div лишь для того, чтобы положить в него результат функции createContentModal
    div.appendChild(createContentModal()); 
    overlay.innerHTML = div.innerHTML; // и передать его html содержимое куда надо
    Ответ написан
    Комментировать
  • Как добавить блок в input?

    @alexalexes
    Либо вместо input использовать textarea высотой в одну строку, чтобы можно было добавить псевдоэлемент.
    Либо повесить обработчик события который перехватывает любой ввод символов в поле, извлекает число из строки, и дописывает символ. Но тут придется еще бороться с тем, чтобы курсор не съезжал в конец строки.
    Ответ написан
    Комментировать
  • Надо ли дожидаться загрузки документа, если скрипт подключается перед закрывающим тегом body?

    @alexalexes
    Попробуй вычитать геометрию img или его контейнеров до загрузки изображений.
    Ответ написан
    1 комментарий
  • Как изменить масштабирование html страницы?

    @alexalexes
    Взять самый большой блок страницы и масштабировать через transform:
    document.body.style.transform = 'scale(' + ваше_значение + ')';

    Но это никакое отношение к тому свойству масштаба в меню браузера не имеет. Это только мнимая магия CSS преобразований.
    PS: А вообще, как-то не очень дублировать то, что есть в браузере из коробки. Времена, когда каждый второй рисовал циферблат часов времени пользователя на страничке уже давно прошли.
    Ответ написан
  • Событие change. Почему счетчик работает не корректно?

    @alexalexes
    Нужно добавить специальную функцию обертку, чтобы изолировать переменные.
    item.addEventListener('change', (function(item, i) // функция обертка для функции обработчика, содержит переменные, которые нужно изолировать 
    {
    
    return function() { //возврат функции-обработчика для лисенера
         if(item.checked) {
             selectedContactValues.push(parseInt(item.dataset.price));
             countElements[i].value = 1;
         } else {
             selectedContactValues.splice(selectedContactValues.indexOf(item.dataset.price),1);
             countElements[i].value = 0;
         }
            
            resultElement.textContent =  sumArray(selectedContactValues);
        }; // конец функции обработчика событий, переменные которые нужно пропустить через замыкание
    
    })(item, i) // конец функции обертки
    );

    ПС: Возможно, тут нужно клонировать объект item:
    })(JSON.parse(JSON.stringify(item)), i) // конец функции обертки

    Данный способ склонирует только структуру и данные объекта без ссылок на функции и ссылок на DOM.
    ППС: Или брать arr[i] внутри обертки в качестве item, тогда изолировать придется только i:
    item.addEventListener('change', (function(i) // функция обертка для функции обработчика, содержит переменные, которые нужно изолировать 
    {
    
    return function() { //возврат функции-обработчика для лисенера
    let item = arr[i]; // берем item из внешнего массива arr, но по изолированному индексу i     
    if(item.checked) {
             selectedContactValues.push(parseInt(item.dataset.price));
             countElements[i].value = 1;
         } else {
             selectedContactValues.splice(selectedContactValues.indexOf(item.dataset.price),1);
             countElements[i].value = 0;
         }
            
            resultElement.textContent =  sumArray(selectedContactValues);
        }; // конец функции обработчика событий, переменные которые нужно пропустить через замыкание
    
    })(i) // конец функции обертки
    );
    Ответ написан
    2 комментария
  • Как установить правильное смещение dom элемента(jquery, css)?

    @alexalexes
    но откуда то берется плавная прокрутка до нужного места(возможно бутстрап накладывает анимацию)

    Если сторонняя js библиотека не перебирает scrollTop для имитации прокручивания, то возможно в css указано:
    html
    {
      scroll-behavior: smooth;
    }

    Это свойство позволяет обычным способом через css указать, чтобы страница прокручивалась плавно, если меняются прокручивающиеся свойства, без указания их промежуточных значений.

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

    Со smooth-ом моргать не должно, так как js будет (должен) оперировать начальными и конечными значениями прокрутки, а анимацией будет управлять браузер.
    Ответ написан
    Комментировать
  • Как изменить input type="hidden" на "text" в Chrome?

    @alexalexes
    По идее, самым пробивным способом со времен ie6, чтобы что-то заменить в атрибуте тега было использование setAttribute:
    inputs[i].setAttribute('type', 'text');
    Ответ написан
    7 комментариев
  • Как "удалить переменную"?

    @alexalexes
    Удаление плота:
    https://docs.anychart.com/Stock_Charts/Chart_Plots....
    DISABLING AND REMOVING
    If you want to disable plot temporarily use the enabled() method, the series and settings will stay there once you enable plot again.

    To remove plot with all its contents and settings use the dispose() method.


    Удаление серии:
    https://docs.anychart.com/Working_with_Data/Series....

    REMOVING SERIES
    As far as any chart can be adjusted or added at any time, you can also remove any series. If you know the id of the series that should be removed, invoke removeSeries() method and use series id as a parameter for this method. In the situation, when the series has no id it can be removed using removeSeriesAt() method. removeSeriesAt() method uses series index as a parameter and removes the series with the given index.
    Ответ написан
    Комментировать
  • Как сбросить только 1 input file?

    @alexalexes
    Можно использовать css превдокласс nth-child, чтобы выловить нужный элемент с одинаковым классом в пределах одного контейнера.
    $('.image-upload:nth-child(' + номер_интупа_начиная_с_единицы + ')').val('');

    Можно воспользоваться возможностями jquery:
    $('.image-upload')[номер_интупа_начиная_с_нуля].val('');

    А вообще, тут напрашивается сделать шаблон в VueJS, чтобы обеспечить привязку элементов DOM-дерева и бизнес-логики скрипта. Чтобы не высчитывать на каждое событие, а для какого i-ого элемента оно предназначено. Но это уже совсем другая история.
    Ответ написан
    Комментировать
  • В чём отличие результатов кодировок `encodeURI`, `encodeURIComponent` и `application/x-www-form-urlencoded`?

    @alexalexes
    Отличия в охвате специальных символов, которые подвергаются конвертированию.
    Функция encodeURI меньше охватывает символов, а функция encodeURIComponent - больше.
    Но ни та, ни другая не достигает стандарта RFC 3986, чтобы считаться полностью правильно закодированным в вид контента application/x-www-form-urlencoded (смотрите документацию по encodeURI).

    PS: Со стороны php сервера такая же история. Есть urlencode/urldecode - которые неполные по RFC 3986, а есть rawurlencode/rawurldecode - которые полностью удовлетворяют стандарту RFC 3986. При кастомном конструировании http пакетов предпочтительно использовать последние.
    Ответ написан
    1 комментарий