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

    @alexalexes
    Вот, собственно, решение:
    <input type="button" onclick="calc_table_add_row()" value="Добавить"/>
    <div id="calc_table" class="table"></div>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script>
          // функция для добавления вычисляемой строки
          function calc_table_add_row()
          {
            //Элементы input подписаны на события onkeypress и onblur, что позволяет делать пересчет как при непосредственном изменении значения, так и во время потери фокуса
            $('#calc_table').append(
            '<div class="tr">\
               <div class="td">' + ($('#calc_table>div.tr').length + 1 /* это нумератор строки, добавляется номер от существующего кол-ва строк */) + '</div>\
               <div class="td">\
                 <input type="text" onkeypress="calc_table_recalc_row(event)" onblur="calc_table_recalc_row(event)"/></div>\
               <div class="td"><input type="text" onkeypress="calc_table_recalc_row(event)" onblur="calc_table_recalc_row(event)"/></div>\
               <div class="td"><input type="text" onkeypress="calc_table_recalc_row(event)" onblur="calc_table_recalc_row(event)"/></div>\
               <div class="td"></div>\
               <div class="td"></div>\
             </div>'
            ); 
          }
          // функция-обработчик пересчета значений в строке
          function calc_table_recalc_row(e)
          {
            var cur_input = e.target; // на этом элементе произошло событие (input)
            var cur_td = cur_input.parentNode; // получаем родительский элемент (div.td, в котором нажодится затронутый input)
            var cur_tr = cur_td.parentNode; // получаем родительский элемент (div.tr, в котором нажодится div.td с затронутым input)
            var td_divs = $(cur_tr).find('div.td'); // находим все элементы div.td на данной строке
            try // если возникнет какая-то ошибка, то тихо прекратим вычисления
            {
              var input1 = parseFloat($(td_divs[1]).find('input')[0].value); // получаем значение ячейки 2
              var input2 = parseFloat($(td_divs[2]).find('input')[0].value); // получаем значение ячейки 3
              var input3 = parseFloat($(td_divs[3]).find('input')[0].value); // получаем значение ячейки 4
              if(!isNaN(input1) && !isNaN(input2) && !isNaN(input3)) // все ли значения получились числами вещественными ?
              {
                var result4 = input3 / input2; // считаем результат для ячейки 5
                $(td_divs[4]).html( (result4).toFixed(2) ); // записываем результат в ячейку 5 с округлением до 2 знаков
                $(td_divs[5]).html( (result4 * (input1.toFixed(2) == 10.00 ? 0.1 : 5)).toFixed(2) ); // считаем и записываем результат в ячейку 6 с округлением до 2 знаков
              }
            }
            catch(ex)
            {
            }
          }
    </script>
    Ответ написан
    Комментировать
  • Скрипт выполняется не на всех устройствах?

    @alexalexes
    а) Вероятно, один из компонентов страницы не прогрузился до конца.
    https://learn.javascript.ru/onload-ondomcontentloaded
    Есть несколько разных обработчиков, и они срабатывают на разную полноту контента страницы.
    На плоскости JQuery такое же разнообразие.
    front-end.su/2016/02/12/load-events
    б)
    if(!preloader.classList.contains('done'))

    Хотите большую поддержку браузерами и с легкой руки используете свежие методы: classList.
    Разработчик обязан страдать, применяя решения и используя более устаканенные методы, если хочет широкий охват поддержки браузерами:
    if(preloader.getAttribute('class').indexOf('done') == -1)

    PS: Или не обязан, если подключить JQuery.)
    Ответ написан
    Комментировать
  • Почему iphone пропускает проверку на возраст?

    @alexalexes
    а) Чтобы не было непоняток с форматом даты входной строки, подставляйте параметры явно:
    new Date(yearVal, monthVal, dayVal)
    б) Еще полезно привести время к одной величине для сравнения:
    (new Date()).getTime() - (new Date(yearVal, monthVal, dayVal)).getTime()

    PS: А вообще, возраст нужно считать по каждому компоненту даты, чтобы не нарываться на високосные года:
    var now = new Date();
    var age = (now.getFullYear() - yearVal - ((now.getMonth() - (monthVal - 1) || now.getDate() - dayVal) < 0 ? 1 : 0));
    Ответ написан
    2 комментария
  • Как остановить выполнение setTimeout на 2 шаге?

    @alexalexes
    Можно.
    function highlightcurrent(items, index) 
    {
      if(index != 2) // выходим из функции, если достигли определенного индекса
      {
        items.removeClass("highlightcurrent");
        items.eq(index).addClass('highlight');  
        items.eq(index).addClass('highlightcurrent');   
        setTimeout(function()
        {
          highlightcurrent(items, index + 1)
        }, 1000);
      }
    }
    
    highlightcurrent($('.progress-page-tabs-col'), 0);
    Ответ написан
    3 комментария
  • Как передать html таблицу на почту?

    @alexalexes
    Принять данные от отправленной формы и отправить по почте письмо, заполненное по шаблону, аналогично полям формы.
    Для реализации отправки можно воспользоваться встроенной функцией mail(). Можно написать свой велосипед для полноценной работы с smtp, а можно воспользоваться библиотекой, например, PHPmailer.
    Для надежности перед отправкой лучше дополнительно записывать принятые заявки в БД.
    Мало ли по каким причинам письма не будут слаться (на стороне вашего сервера и на стороне почтового сервиса есть очень много моментов, которые могут выстрельнуть).
    Ответ написан
  • Почему в Firefox не подгружаются изображение пока не нажмешь F12?

    @alexalexes
    У вас на странице куча миниатюр на 2500x2500 по ~1Мб каждая.
    Идет гонка, кто быстрей загрузится: скрипты или картинки.
    Скрипты находятся в конце, и они последние начинают загрузку.
    Такое расположение скриптов рекомендуют разработчики Google.
    Еще они рекомендуют делать упрощенный функционал сайта, пока скрипты не вступили в свою силу после того, тогда как загрузятся.
    Что требуется этому сайту:
    1) Создать и наладить отображение упрощенного стиля;
    2) Найти баланс в размере миниатюр.
    Ответ написан
  • Можно ли избавиться от setInterval?

    @alexalexes
    Геттеры и сеттеры.
    Только если ваша переменная является свойством объекта, тогда вы можете задать свою set-функцию, которая не требует от остальной части скрипта какой-то модификации.
    На глобальной переменной my_var делается это так:
    Object.defineProperty(window /*- объект, где располагается свойство */, "my_var" /* - свойство, которое нужно опекать */,
    {
      get: function() // сторожим чтение значения
      {
        alert('Кто-то прочилал my_var!');
      },
      set: function(newValue) // сторожим запись значения
      {
        alert('Кто-то записал my_var! Новое значение: ' + newValue);
      }
    });
    my_var = 123456;  // пробуем записать что-то
    you_var = my_var; // пробуем извлечь значение
    Ответ написан
    Комментировать
  • Нужно создать кнопку, и когда кто-то нажимает, я хочу отобразить метку со ссылкой. Как это можно сделать?

    @alexalexes
    Управляйте видимостью вашей ссылки по событию кнопки onclick.
    Какие тут проблемы могут возникнуть-то у вас?
    <a id="my_link" href="https://vk.com/durov" target="_blank" style="display: none;">
      <img src="img/57d3d0a9e386c157136717cc.png" width="30px"/>
    </a> 
    <input type = "button" onclick = "document.getElementById('my_link').style.display = 'inline';" value = "связаться со мной" />
    Ответ написан
    Комментировать
  • Вопрос про полифиллы, для чего тут this(на что ссылается?) и null, а while (node) -значит бесконечный цикл?

    @alexalexes
    var node = this; // в ноду кладем текущий элемент Element;
    // начинаем примерять селектор, двигаясь от текущего элемента к его родителям     
     while (node) // пока есть элемент (не null) (или на предыдущей итерации провалили матч и есть родитель)
     {
            if (node.matches(css)) // подходит селектор элементу ?
             return node; // возвращаем этот элемент, цикл останавливается
            else
             node = node.parentElement; // не подошло, устанавливаем на node родительский элемент, идем на следующую итерацию.
          }
    return null; // цикл прошелся по всем родителям - ничего не нашли

    ----------
    Подставляем свой "велосипед" closest в прототип элемента:
    Element.prototype.closest = function (css)
    -------------
    Подставляем в прототип элемента метод matches любую доступную из перечисленных через || реализацию, если этот метод в разных браузерах называется по-разному, чтобы сгладить этот досадное недоразумение.
    Element.prototype.matches = Element.prototype.matchesSelector || <подставьте любой метод, чтобы делал матч, но назывался не как у всех>
    Ответ написан
    Комментировать
  • Как работать c позицией элементов в canvas?

    @alexalexes
    Не лучше ли background эксплуатировать для этих целей, меняя местами источники изображений?
    <style>
          #elem1
          {
            display: block;
            width: 400px;
            height: 400px;
            background-image: url("back1.png"),
                              url("back2.png");
            transition: background-image 0.5s ease; /* для наглядности эффекта */
          }
        </style>
        <div id="elem1"></div>
        <script>
        var trigger = 0;
        setInterval(function()
        {
          var elem1 = document.getElementById('elem1');
          elem1.style.backgroundImage = trigger % 2 == 1 ? 'url("back1.png"), url("back2.png")' : 'url("back2.png"), url("back1.png")';
          trigger++;
        }, 1000);
    
        </script>
    Ответ написан
    Комментировать
  • Как передать данные из COM порта в JS?

    @alexalexes
    Среда выполнения JS в браузере изолирована от железа, поэтому тут нужна полноценная реализация клиент-серверного приложения.
    Компьютер с COM-портом будет выступать в качестве веб-сервера.
    На этом сервере необходимо реализовать серверный скрипт, который подключится к COM и будет осуществлять транзит по HTTP с клиентом - браузером.
    А уже на стороне клиента API будет реализовано посредством JS, а получение данных - AJAX-ом.
    Вот пример как сделать серверную часть на NodeJS.
    Ответ написан
    Комментировать
  • Почему onclick срабатывает не на том div?

    @alexalexes
    Потому что к элементу, на котором произошло событие, нужно выходить через e.target, то есть использовать дескриптор события e.
    pole.onclick = function(e)
      {
          if(e.target.getAttribute('class') != 'pole-blue')
          {
              e.target.setAttribute('class', 'pole-blue');
          }
      }

    Еще момент, переменная через var должна быть объявлена один раз, переопределять через var нельзя.
    var pole = null;
    for(var i = 0;i<10;i++)
    {
      pole = document.createElement('div');
    Ответ написан
    1 комментарий
  • Сортировка в JavaScript многомерных массивов по одному из параметров?

    @alexalexes
    Как говорится, смотри в учебнике.
    Объекты могут быть отсортированы по значению одного из своих свойств.

    var items = [
      { name: 'Edward', value: 21 },
      { name: 'Sharpe', value: 37 },
      { name: 'And', value: 45 },
      { name: 'The', value: -12 },
      { name: 'Magnetic' },
      { name: 'Zeros', value: 37 }
    ];
    items.sort(function (a, b) {
      if (a.name > b.name) {
        return 1;
      }
      if (a.name < b.name) {
        return -1;
      }
      // a должно быть равным b
      return 0;
    });
    Ответ написан
    Комментировать
  • Как вывести и одновременно передать значение value в форме HTML?

    @alexalexes
    Кнопку оставляете в покое, значение передаете скрытым полем.
    <form action="?action=select_pay" method="POST">
    <input type="hidden"  name="pay_mode" value="20"  />
    <input type="submit" class="superbutton"  value="Яндекс Деньги"  />
    </form>
    <form action="?action=select_pay" method="POST">
    <input type="hidden"  name="pay_mode" value="10"  />
    <input type="submit" class="superbutton"  value="Еще одна платежка"  />
    </form>
    Ответ написан
  • Как сделать автофокусировку на поле ввода только на одной странице?

    @alexalexes
    На мобильнике, как правило, есть тачскрин.
    Я, обычно, проверяю наличие тач-обработчиков.
    И не важно, что за устройство: яблоко, андроид и тд.
    if ('ontouchstart' in document.documentElement) 
    {
    // есть сенсорный экран, значит, имеем дело с переносным гаджетом.
    }
    else
    {
      // desktop версия кода
     (элемент ввода).focus(); //устанавливаем фокус
    }
    Ответ написан
    Комментировать
  • Динамическое добавление ссылок на js скрипты в заголовок?

    @alexalexes
    Хватит и нативной составляющей, чтобы в документ добавить любой head.
    А вообще, смотрите скрипты счетчиков Яндекс или Гугл -метрики, там есть более компактные трюки с модификацией head.
    (function()
    {
      var src = 'https://cdn.jsdelivr.net/npm/suggestions-jquery@17.12.0/dist/css/suggestions.min.css';
      var link = document.createElement('link');
      link.setAttribute('src', src);
      link.setAttribute('type', 'text/css');
      link.setAttribute('rel', 'stylesheet');
     document.head.appendChild(link);
    
      src = 'https://cdn.jsdelivr.net/npm/suggestions-jquery@17.12.0/dist/js/jquery.suggestions.min.js';
      var scrt = document.createElement('script');
       scrt.setAttribute('src', src);
      document.head.appendChild(scrt);
    }
    )();
    Ответ написан
    Комментировать
  • Javascript. Как вернуть несколько значений через запятую?

    @alexalexes
    scheduler.attachEvent("onEventSave",function(id,ev,is_new)
    {    
      var checked_users = ev.username.split(','); // переводим строку в список отмеченных id пользователей
      var new_text = ''; // сюда будем писать строку с именами пользователей
      var checked_users_count = checked_users.length; // кол-во отмеченных пользователей
      for (var i = 0; i < checked_users_count; i++)
      {
        var check_user_id = checked_users[i]; // текущий отмеченный id
        var ch_users = users.filter(usr => usr.key == check_user_id); // получаем человека из списка users по отмеченному id (на выходе тоже список, но не более 1 элемента)
        if (ch_users.length > 0)
          new_text += (new_text != '' ? ', ' : '') + ch_users[0].label; // вписываем в строку найденного пользователя
      }
      ev.text = new_text == '' ? 'Nobody' : new_text; // если никого не нашли, то как-то обозначаем эту ситуацию (Nobody)
      return true;
    })
    Ответ написан
    Комментировать
  • Как безопасно загрузить изображение на сервер?

    @alexalexes
    На стороне PHP пропустить полученный файл через GD библиотеку.
    При необходимости, уменьшить качество выходного файла, и попутно сгенерировать preview, отправив его обратно клиентку (+ подтвердив получение сервером).
    Учтите, придется увеличить доступный объем оперативной памяти для одного процесса PHP.
    На моем опыте, чтобы GD проглотила 16 Мпикс картинку, нужно 128 Мб ОЗУ.
    Перед скармливаем GD взвешиваем картинку с помощью getimagesize().
    Если это не сделать, и с превышением лимита отдать на обработку библиотеке, то скрипт тихо-мирно заглохнет, не сообщив клиенту ничего, а так можно сгенерировать сообщение, что файл большой.
    Ответ написан
  • Как сделать, чтобы все нечекнутые и чекнутые чекбоксы отправлялись на бэк?

    @alexalexes
    Сталкивался с такой особенностью, решал как раз через дополнительное поле hidden:
    <label>
    <input type="hidden" id="field_0_1" name ="param_list[0][field_1]" value="off"/>
    <input type="checkbox" onchange="set_hidden_checkbox(this, 'field_0_1')"/>
    </label>

    function set_hidden_checkbox(target, id)
    {
      var hidden = document.getElementById(id);
      if(hidden !== undefined)
         hidden.value = target.checked ? 'on' : 'off';
    }

    Атрибут value в hidden нужно инициализировать значением по умолчанию.
    Ответ написан
    Комментировать
  • Как сделать вывод на JS?

    @alexalexes
    Вот вам в div.
    В input-е используется свойство value для отображения значения.
    А div надо набивать содержимым.
    Вот и вся разница.
    Пример элемента вывода:
    <div id="i4"></div>
    Код вывода:
    document.getElementById('i4').innerHTML = Number(n1)*0.5;
    Ответ написан
    Комментировать