Событие onclick в javascript и jquery на примерах

Событие onclick в javascript и jquery на примерах
Комментарии: 73

Такое простое событие, как onclick в javascript, может быть вызвано несколькими способами и скрыает некоторые тонкости. Событие происходит при клике по элементу левой кнопкой мыши. Стоит заметить, что при клике происходит так же ещё два события, а именно нажатие на кнопку мыши и её отжатие.

событие onclick в javascript

Все примеры будем рассматривать на теге «a» (ссылку). Пусть это не смущает, с другими тегами будет работать аналогичным образом.

Самый простой способ повесить событие onclick, это прописать его непосредственно в html теге:

<a href="#" onclick="alert('Пример 1 сработал'); return false;">Пример 1</a>

Код в действии:

Нажмите на ссылку: Пример 1

В примере при нажатии на ссылку появляется всплывающее окно с сообщением. Дополнительно к действию мы прописали «return false;». Это требуется чтобы предотвратить переход по ссылке после срабатывания события «onclick». В других элементах (где нет аттрибута href) это можно опустить.

Рассмотренный вариант можно использовать если событие содержит мало кода. Иначе, следует обратить внимание на другие способы.

Выносим код события onclick в javascript-функцию

Следующий способ хорош тем, что мы отделяем javascript-код от html тегов. В теге прописываем название функции, а саму функцию выносим в отдельный блок:

<script>
function ChangeColor(Element) {
	if (Element.style.color == 'green') Element.style.color = 'red';
	else Element.style.color = 'green';
	return false;
}
</script>

<a href="#" style="color: green;" onclick="return ChangeColor(this);">Изменить цвет</a>

Код в действии:

Нажмите на ссылку: Изменить цвет

Но и здесь всё не идеально. Что делать, если событие требуется повесить на все ссылыки сайта, а их сотни? Кажется что это трудно, а на деле — меньше десяти строк кода. Задача решается с помощью селекторов. В примере опять будем производить действия с тегом «a», но ничего не мешает использовать вместо ссылки «img» или «div».

Вешаем onclick на элемент из javascript-кода

Рассмотим еще один способ, на мой взгляд, самый практичный и надежный. Хорош он тем, что событие можно повесить на множество элементов. Для этого требуется выбрать при помощи javascript-селекторов элементы, к которым требуется применить событие onclick.

<script>
//дожидаемся полной загрузки страницы
window.onload = function () {

    //получаем идентификатор элемента
    var a = document.getElementById('switch');
    
    //вешаем на него событие
    a.onclick = function() {
        //производим какие-то действия
        if (this.innerHTML=='On') this.innerHTML = 'Off';
        else this.innerHTML = 'On';
        //предотвращаем переход по ссылке href
        return false;
    }
}
</script>

<a id="switch" href="#">On</a>

Код в действии:

Нажмите на ссылку: On

Выбору элементов по селекторам можно посвятить отдельную тему, могу сказать только то, что согласно новой спецификации HTML5, их выбор стал прост и в javascript. Если Вы знакомы с jquery или CSS, то выбрать нужные элементы для Вас не составит труда. Например, так просто можно выбрать все элементы с классом «link» и повесить на них нужное действие:

//выбираем нужные элементы
var a = document.querySelectorAll('.link');
    
//перебираем все найденные элементы и вешаем на них события
[].forEach.call( a, function(el) {
    //вешаем событие
    el.onclick = function(e) {
        //производим действия
    }
});

Применяем jQuery

Если в проекте используется библиотека jQuery, то можно ещё упростить код. Рассмотрим два самых распространенных способа:

$(function(){
    $(".link").click(function() {
        //действия
    });
});

И ещё один вариант, который идентичен предыдущему.

$(function(){
    $(".link").on("click", function(){
        //действия
    });
});

С обработчиком «on()» лучше ознакомиться отдельно, так как он несет в себе много полезного функционала. Например, возможность указать через пробел несколько событий к которым будет применяться действие, делегировать события на дочерние элементы, а так же он полезен если необходимо повесить событие на динамически добавляемые элементы, которых изначально нет на странице.

Темы:
JavaScriptjQuery
Ещё интересное — 6
Комментарии —
  1. Александра
    Александра18 ноября 2015, 18:36#
    Просто супер статья, спасибо!
    1. Andy Si20 ноября 2015, 22:08#
      спасибо за положительный отзыв
      1. Сергей
        Сергей20 августа 2016, 18:43#
        Статья и правда супер!!!
      2. Александр
        Александр08 декабря 2015, 12:54#
        Статья замечательная! На свой вопрос, ответ получил.
        1. tasman992
          tasman99215 декабря 2015, 23:42#
          Можем ли мы передать функции значение не только this?
          1. Egor
            Egor16 декабря 2015, 11:09#
            а я час просидел нечего понять не мог, не работал $(#blabla),click(blala)
            не работал bind. а эллемент из подгружаемого шаблона,,,, как так!!! думал я, что за фигня такая. Оказывается через .on() нужно и ровно после innrhtml or append. Но все же вопрос. может лучше в html указывать onclick=«blabla()»??
            Согласен что можено повесит событие по классу, но блин читая хтмл не совсем ясно кто что где вызывается и какую далее функцию смотреть, только по id а там искать в js где и как этот id используется. вот такой у меня сложный вопрос.
            1. Andy Si16 декабря 2015, 11:15#
              bind это устаревший метод, ему на замену пришел on. Обычно берется, создается один файл script.js, подключается ко всем страницам и там пишутся все скрипты. Пихать их в код самого сайта — плохой тон. А чтобы всё быстро находить — пишите подробные комментарии к каждому скрипту.
            2. Vladimir
              Vladimir13 апреля 2017, 22:37(был изменён)#
              Можно ли осуществить такое?
              Есть ссылка на странице1, пользователь кликает по ней в фоновом режиме открывается страница2, этой ссылки, а на странице1 на месте ссылки появляется другой текст.
              1. Andy Si14 апреля 2017, 09:13#
                Браузеры не поддерживают открытие страниц в фоновом режиме. Если имеется ввиду, в новой вкладке, то да — так можно.
                1. Владимир
                  Владимир14 апреля 2017, 17:57#
                  можно привести пример
                  1. Andy Si17 апреля 2017, 08:52#
                    Вообще в статье уже есть примеры. Что-то такое:
                    var a = document.getElementById('switch');
                        a.onclick = function() {
                            window.open('http://example.com');
                    	this.innerHTML = 'другой текст';
                            return false;
                        }
              2. Trizna
                Trizna07 июля 2017, 02:29#
                Друзья, как такое может быть?

                Делаю скрипт и одна и та же функция вот так работает:
                <div onclick="Func('Blabla');">Click</div>
                и так тоже работает:
                <span onclick="Func('Blabla');">Click</span>
                Но вот так эта же функция НЕ работет:
                <img src="img.png" onclick="Func('Blabla');" />
                и так тоже НЕ работает:
                <input type="button onclick="Func('Blabla');" value="Click" />
                Как такое может быть?
                1. Andy Si07 июля 2017, 13:07#
                  В последнем примере явно ошибка в синтаксисе. onclick занесено в атрибут type. С картинкой — вроде всё в порядке, но есть ощущение что ошибка в том что сначала идёт картинка, а только потом объявляется функция. Или что-то перебивает событие onclick. Необходимо смотреть непосредственно на сайте.
                2. Евгений
                  Евгений08 июля 2017, 09:39(был изменён)#
                  Скажите, а получится данный способ использовать, чтобы назначить событие клик по определенной кнопке, с целью передачи этого события в Яндекс.Метрику и Google Analitycs?
                  Я совсем не знаю javascript, но насколько понимаю, для этого у кнопки должен быть указан id? Если у кнопки нет id получится ли как-то назначить событие для определенных кнопок?

                  Вкратце, объясню зачем мне это: я интернет-маркетолог и у меня есть доступ только к админке modx, в которой я не могу назначить id для кнопок, но теоретически мог бы использовать этот код и вставить его в другую часть кода страницы, чтобы передавать данные о клике на кнопку «Оставить заявку» в систему Яндекс.Метрики для анализа источников, с которых пришли посетители оставившие заявки на сайте.
                  1. Andy Si09 июля 2017, 10:59#
                    Можно без id настроить. Необходимо изучить что такое jquery селекторы, найти уникальный селектор этой кнопки и повесить на него то же событие:
                    $("селектор кнопки").on("click", function(){
                       // отправка целей
                    });
                    Но есть вероятность что это событие уже где-то определено, и в нём прописано return false. Тогда второе подобное событие может не сработать и потребуется придумывать другие способы.
                  2. Павел Иванов
                    Павел Иванов01 апреля 2018, 01:22#
                    Я чуть не обделался от привидения ахахаха…
                    1. Andy Si01 апреля 2018, 21:56#
                      С первым апреля :)
                      1. Нина
                        Нина09 апреля 2018, 15:35#
                        А как вызвать привидение? Оно такое классное…
                        1. Andy Si09 апреля 2018, 16:43#
                          Само прилетает когда захочет попугать :)
                    2. Дед
                      Дед02 июня 2018, 17:37#
                      Добрый день, уважаемый.
                      Сколько не бьюсь, не могу решить такую проблему: первых два onClick работают нормально — замещая друг друга. Как сделать, что бы все работали также? Для примера привожу выбор из 4, на самом деле мне нужно 10 кнопок. Неужели, нужно прописывать на закрытие все 10?

                      <div style="border:5px solid #000;width:600px;background-color: #fff;margin:5px auto;padding:5px;">
                          <div style="margin:5px;text-align:center;">
                       <input type="submit" name="" value="1111111" onClick="if (document.getElementById('obm1').style.display=='none') {document.getElementById('obm1').style.display='block'; document.getElementById('obm2').style.display='none'; document.getElementById('addform').style.display='none';} else {document.getElementById('obm1').style.display='none';}">   
                       <input type="submit" name="" value="2222222" onClick="if (document.getElementById('obm2').style.display=='none') {document.getElementById('obm2').style.display='block'; document.getElementById('obm1').style.display='none'; document.getElementById('addform').style.display='none';} else {document.getElementById('obm2').style.display='none';}">  
                       <input type="submit" name="" value="3333333" onClick="if (document.getElementById('obm3').style.display=='none') {document.getElementById('obm3').style.display='block'; document.getElementById('obm1').style.display='none'; document.getElementById('addform').style.display='none';} else {document.getElementById('obm3').style.display='none';}">
                       <input type="submit" name="" value="4444444" onClick="if (document.getElementById('obm4').style.display=='none') {document.getElementById('obm4').style.display='block'; document.getElementById('obm1').style.display='none'; document.getElementById('addform').style.display='none';} else {document.getElementById('obm4').style.display='none';}">
                          </div>
                              <!------ obm1 ------>
                              <div id="obm1" style="display:none;text-align:center;border:4px solid #000;padding:10px;background:#ccf;">111111111111111</div>
                              <!------ /// obm1 ------><!------ obm2 ------>
                              <div id="obm2"  style="display:none;text-align:center;border:4px solid #000;padding:10px;background:#cfc;">22222222222222222222</div>
                              <!------ /// obm2 ------><!------ obm3 ------>
                              <div id="obm3" style="display:none;text-align:center;border:4px solid #000;padding:10px;background:#fcc;">3333333333333333333333333</div>
                              <!------ /// obm3 ------><!------ obm4 ------>
                              <div id="obm4"  style="display:none;text-align:center;border:4px solid #000;padding:10px;background:#ffc;">4444444444444444444444444444444444444444444</div>
                              <!------ /// obm4 ------>
                      </div>
                      С уважением, Дед.
                      1. Andy Si02 июня 2018, 18:29#
                        Добрый день.
                        Совет, не пиши стили в атрибуте style. Для стилей давно придумали такую замечательную вещь, как CSS.

                        Второй совет, лучше использовать для твоих целей jquery библиотеку, тогда весь js код уместится строчки в 4. Пример, как это работает, есть в статье.

                        Но если нужно всё же на чистом javascript, то лучше всем DIV-ам прсвоить один и тот же класс и перед display=block сначала скрывай все элементы с этим классом, а потом уже показывать нужный:
                        var myDiv = document.querySelectorAll('.myDiv');
                        myDiv.style.display='none';
                        document.getElementById('obm1').style.display='block';
                        1. Дед
                          Дед02 июня 2018, 22:00#
                          Не совсем понял с общим классом всем DIV-ам, а как же потом выбирать нужный? Если можно напишите все в моем примере, что бы все таки понял.
                          Стили в атрибуте style написал только для примера, они прописаны в файле .css
                          Будьте здоровы.
                          1. Andy Si03 июня 2018, 09:23#
                            Я в примере написал onClick для первой кнопки. Нужный выбирается затем так же по ID. Остальные аналогично. Если не понятно, то лучше сначала почитай какой-нибудь самоучитель по Jquery, сильно поможет в разработке.
                        2. varnak
                          varnak20 июня 2018, 17:21(был изменён)#
                          не туда
                        3. varnak
                          varnak20 июня 2018, 17:22#
                          статья помогла спс.
                          дайте код приведения (или сслыку)
                          1. Andy Si22 июня 2018, 11:27#
                            я не верю в привидения
                            1. Vladimir
                              Vladimir04 августа 2018, 00:50#
                              еба я пересрался.
                              1. Михаэль Вейк
                                Михаэль Вейк25 февраля 2019, 16:31#
                                Привидений не существует. Это лишь иллюзия…
                          2. Михаэль Вейк
                            Михаэль Вейк25 февраля 2019, 16:30#
                            Отличная статья! Спасибо!
                            1. Макс
                              Макс13 августа 2019, 18:55#
                              В этом коде ошибка!:
                              //выбираем нужные элементы
                                  var a = document.querySelectorAll('.link');
                                  
                                  //перебираем все найденные элементы и вешаем на них события
                                  [].forEach.call( a, function(el) {
                              	       //вешаем событие
                              		    el.click = function(e) {
                              		    	//производим действия
                              			}
                              	});
                              
                              Так он не будет работать!
                              Работакть будет так:
                              //выбираем нужные элементы
                                  var a = document.querySelectorAll('.link');
                                  
                                  //перебираем все найденные элементы и вешаем на них события
                                  [].forEach.call( a, function(el) {
                              	       //вешаем событие
                              		    el.onclick = function(e) {
                              		    	//производим действия
                              			}
                              	});
                              
                              1. Andy Si13 августа 2019, 20:11#
                                Да, точно… спасибо, поправил.
                                1. великий Господин
                                  великий Господин14 августа 2020, 16:05#
                                  опечатка по фрейду
                                  вешаем событие
                                  el.addEventListener('click', function(e) {
                                  //производим действия
                                  });
                                  1. a
                                    a17 марта 2021, 15:20#
                                    Гы.
                                2. Виталий
                                  Виталий27 мая 2020, 11:41#
                                  Подскажите пожалуйста, как сделать так чтобы это событие срабатывало один раз в сутки?

                                  window.onload = function() {
                                      var button = document.getElementById('action');
                                      button.onclick = function() {
                                          console.log('asdf')
                                      }
                                      button.click();
                                  }
                                  1. Andy Si27 мая 2020, 14:41#
                                    Готовый код не помогу написать, нет времени. Ищи документацию по cookies. Тебе надо будет перед выполнением этого кода проверять, есть ли в cookies твоя переменная, если нет, то выполняем код и записываем переменную на 24 часа. Иначе просто выходим.
                                  2. Rodion
                                    Rodion01 июня 2020, 17:16#
                                    Как запустить «скрипт css» то есть у меня есть анимация на css, которая плавно проявляется. Мне надо чтобы по нажатию кнопки с классом navbar-toggler начиналась анимация, и после повторного нажатия заканчивалась… Какой код для этого подойдет?
                                    1. Andy Si01 июня 2020, 17:34#
                                      css анимацию привязываете к какому-то классу и при нажатии на кнопку добавляете/удаляете этот класс к нужному элементу.

                                      Примерно, так:
                                      $('.navbar-toggler').on('click', function(){
                                      $('.selector-element').toggleClass('animation-class');
                                      });
                                      где, .selector-element это селектор элемента, на который навешивается анимация, а animation-class — класс, которому прописана css анимация.
                                      1. Rodion
                                        Rodion01 июня 2020, 18:07#
                                        Спасибо большое очень помогло!
                                    2. Лиана
                                      Лиана26 сентября 2020, 08:05(был изменён)#
                                      Добрый день! Подскажите пожалуйста, как можно сделать: Есть несколько кнопок, у них одинаковый класс и id, при первом клике на одну из этих кнопок нужно скрыть остальные кнопки и блоки с контентом в которых они находятся, при повторном клике показать все блоки с кнопками. Проблема возникла со вторым кликом. Значение класса active = display:none;

                                      $(document).ready(function(){
                                      	$('#sam_id .sam').on('click', function() {
                                      	  if (!$('#sam_id .sam').hasClass('active')) { // если класса нет
                                      	    $('#sam_id .sam').addClass('active'); // добавляем класс всем кнопкам
                                      	    $(this).removeClass('active'); // убираем класс у выбранного элемента
                                      	    console.log('First click'); // код для первого клика
                                      	  } else { // если есть
                                      	    $('#sam_id .sam').removeClass('active'); // убираем класс у всех
                                      	    console.log('Second click'); // код для второго клика
                                      	    return false;
                                      	  }
                                      	});
                                      });
                                      1. Лиана
                                        Лиана28 сентября 2020, 20:58(был изменён)#
                                        Если кому-то понадобится, вот моё решение
                                        $(document).ready(function(){
                                        	$('#sam_id .sam').on('click', function() {
                                        	  if (!$('#sam_id .sam').hasClass('active')) { // если класса нет
                                        	    $('#sam_id .sam').addClass('active'); // добавляем класс всем кнопкам
                                        	    $(this).removeClass('active'); // убираем класс у выбранного элемента
                                        	  } else { // если есть
                                        	    $(this).removeClass('active'); // убираем класс
                                        	    $('#sam_id .sam').removeClass('active');
                                        	  }
                                        	  return false;
                                        	});
                                        }); 
                                        1. Andy Si28 сентября 2020, 22:03#
                                          Хорошее решение. Прошу прощения что не смог помочь, было много дел.
                                      2. Дмитрий
                                        Дмитрий06 октября 2020, 11:27#
                                        Вы пишите «Рассмотим еще один способ, на мой взгляд, самый практичный и надежный. Хорош он тем, что событие можно повесить на множество элементов. Для этого требуется выбрать при помощи javascript-селекторов элементы, к которым требуется применить событие onclick.»

                                        А можно рабочий пример для двух пар ON/OFF и ON/OFF
                                        Т.е. кликаю на первый ON и он меняется на OFF, кликаю на второй и уже меняется он с тем, что бы можно было увеличивать количество неограниченно.
                                        1. Andy Si06 октября 2020, 12:40#
                                          Измени в ссылках id=switch на class=switch и поменяй скрипт:
                                          window.onload = function () {
                                            document.querySelectorAll('.switch').forEach(el => { 
                                            el.onclick = function() {
                                                    //производим какие-то действия
                                                    if (this.innerHTML=='On') this.innerHTML = 'Off';
                                                    else this.innerHTML = 'On';
                                                    //предотвращаем переход по ссылке href
                                                    return false;
                                                };
                                            });
                                          }
                                          
                                          1. Дмитрий
                                            Дмитрий07 октября 2020, 15:33#
                                            К сожалению не работает.
                                            Выдает ошибку «Синтаксическая ошибка» символ 52
                                            на строчке document.querySelectorAll('.switch').forEach(el =>
                                            1. Andy Si07 октября 2020, 21:07#
                                              Все работает, проверял… ну может для старых браузеров так лучше написать:
                                              window.onload = function () {
                                                document.querySelectorAll('.switch').forEach(function(el) { 
                                                  el.onclick = function() {
                                                        //производим какие-то действия
                                                        if (this.innerHTML=='On') this.innerHTML = 'Off';
                                                        else this.innerHTML = 'On';
                                                        //предотвращаем переход по ссылке href
                                                        return false;
                                                    };
                                                });
                                              }
                                              1. Дмитрий
                                                Дмитрий07 октября 2020, 22:12#
                                                Спасибо большое, оказывается все работает.
                                                Проверял в PHP Expert Editor оба варианта не работают.
                                                Проверил на сервере — оба варианта работают.
                                                Так, что извиняюсь за дезинформацию.
                                                Я, вообще то, хочу поставить на свой сайт систему лайков. Посмотрел в Интернете все, что мог найти по такому запросу.
                                                Везде делается упор на PHP и MYSQL, а это я и сам знаю. А вот часть javascript везде невнятно. Теперь на основе Вашего кода пойду дальше.
                                                Еще раз спасибо.
                                                P.S. А может подготовите статью про систему лайков, рассчитанную на таких как я, разбирающихся в PHP, но нулях в javascript?
                                                1. Andy Si07 октября 2020, 22:18#
                                                  Сайты на чистом PHP давно не делают, поэтому это уже никому не нужно. Для движков и фреймворков есть готовые решения.
                                            2. Дмитрий
                                              Дмитрий15 октября 2020, 11:14(был изменён)#
                                              По Вашему совету сделал
                                              <a class="switch" href="#">On</a>
                                              ...
                                              <a class="switch" href="#">On</a>
                                              После return false; вставил
                                              <?php INSERT INTO ?>
                                              У каждого <a class… д.б. свой номер
                                              Вопрос.
                                              Как в <a class вставить этот номер, а затем донести его до INSERT INTO
                                              1. Andy Si15 октября 2020, 11:28#
                                                Такие вещи комментариями не объяснить. Найди подходящую статью по реализации чего-то похожего и разбери код. Тогда сможешь понять, как это в целом работает.
                                          2. сергей
                                            сергей07 октября 2020, 19:25#
                                            Добрый день. Помогите с таким вопросом:
                                            есть кнопка
                                            <button type="button" 
                                            	data-item-name="<? echo $name .' | '. $model;?>" 
                                            	data-item-price="<? echo $special ? $special : $price; ?>" 
                                            	class="b24-web-form-popup-btn-15" 
                                            	data-item-time="<?php if ($upc < 5) { echo $upc.' дня'; } else { echo $upc.' дней'; } ?>">Предзаказ</button>
                                            И есть форма
                                            $('.b24-web-form-popup-btn-15').on('click', function(){
                                            	// получаем дата-атрибуты
                                            	var itemName = $(this).attr('data-item-name');
                                            	var itemPrice = $(this).attr('data-item-price');
                                            	
                                            	(function(w,d,u,b){w['Bitrix24FormObject']=b;w[b] = w[b] || function(){arguments[0].ref=u;
                                            	(w[b].forms=w[b].forms||[]).push(arguments[0])};
                                            	if(w[b]['forms']) return;
                                            	var s=d.createElement('script');s.async=1;s.src=u+'?'+(1*new Date());
                                            	var h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);
                                            	})(window,document,'ссылка на внешний скрипт','b24form');
                                            	
                                            	b24form({
                                            		"id":"15",
                                            		"lang":"ru",
                                            		"sec":"код",
                                            		"type":"button",
                                            		"click":"",
                                              		"presets": {
                                                		"item_name": itemName,
                                                		"item_price": itemPrice
                                              		}
                                            	});
                                            });
                                            после первого клика на кнопку форма не открывается. только после 2-го. в чем может быть проблема?
                                            1. Andy Si07 октября 2020, 21:09(был изменён)#
                                              Проблема, скорее всего, в том что функция b24form проинициализироваться не успевает. Попробуй этот код вынести за пределы клика по кнопке:
                                              (function(w,d,u,b){w['Bitrix24FormObject']=b;w[b] = w[b] || function(){arguments[0].ref=u;
                                              	(w[b].forms=w[b].forms||[]).push(arguments[0])};
                                              	if(w[b]['forms']) return;
                                              	var s=d.createElement('script');s.async=1;s.src=u+'?'+(1*new Date());
                                              	var h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);
                                              	})(window,document,'ссылка на внешний скрипт','b24form');
                                              1. Сергей
                                                Сергей07 октября 2020, 23:43(был изменён)#
                                                Попробовал — не помогло. Но и работать не перестало)
                                                1. Andy Si08 октября 2020, 10:27#
                                                  Не знаю, это же фигня битрикса, лучше задать вопрос в их тех. поддержку. Ну либо костыльный вариант, там же в коде до клика можно вставить:
                                                  b24form({"id":"1", "sec":"h6nkwx","type":"button"});
                                                  В клике оставить как есть и она будет срабатывать сразу.
                                                  1. сергей
                                                    сергей08 октября 2020, 12:35#
                                                    Если бы техподдержка реально помогала…
                                                    В хелпе есть статья о возможности передачи параметров в формы, указываются в
                                                    "presets": {
                                                        		"item_name": itemName,
                                                        		"item_price": itemPrice
                                                      		}
                                                    но она не подробно написана, мол для разъяснения обращайтесь к партнерам.
                                                    А кроме вышеперечисленного, проблема в том что формы на странице 2шт
                                            2. Елена
                                              Елена19 октября 2020, 22:42#
                                              Добрый день!
                                              Подскажите пожалуйста, как прописать.
                                              Есть 2 кнопки выбора товара
                                              <a href="" onclick="return false" id="Nabor-1" class="btn alCenter upp db">ВЫБРАТЬ НАБОР-1</a>
                                              <a href="" onclick="return false" id="Nabor-2" class="btn alCenter upp db">ВЫБРАТЬ НАБОР-2</a>
                                              
                                              И форма для отправки:
                                              <form method="post" id="mainform" class="big-form" action="mail.php">
                                              
                                              <div class="input-block"><input required type="text" name="name" placeholder="Ваше имя" class="inputbox" required></div>
                                              <div class="input-block"><input required type="text" name="phone" placeholder="Ваш номер" class="inputbox numbox phone-mask" required></div>
                                              <div class="input-block"><input required type="text" name="comment" placeholder="Набор № " class="inputbox" required></div>
                                              <button type="submit" class="btn2 w100">ПОДТВЕРДИТЬ ЗАКАЗ</button>
                                              </form>
                                              
                                              Как прописать, чтобы при выборе товара заполнялось автоматически поле в форме name=«comment»?
                                              1. Andy Si20 октября 2020, 09:21(был изменён)#
                                                Добрый… Полю с комментом пропишите также какой-нибудь идентификатор, например id=numNabor и код тогда будет такой:
                                                document.getElementById('Nabor-1').onclick = function(e){
                                                	e.preventDefault();
                                                	document.getElementById('numNabor').value = 'Набор 1';
                                                }
                                                
                                                document.getElementById('Nabor-2').onclick = function(e){
                                                	e.preventDefault();
                                                	document.getElementById('numNabor').value = 'Набор 2';
                                                }
                                                1. Елена
                                                  Елена20 октября 2020, 23:15#
                                                  Спасибо!
                                                  У меня все получилось!

                                                  Но есть еще вопрос.
                                                  На главной странице есть форма-1, при заполнении которой и нажав «ЗАКАЗАТЬ СО СКИДКОЙ» перебрасывается на другую страницу сайта, где есть приветствие и обращение по имени, которое заполнено в форме-1, еще одно предложение по выбору товара и форма-2, где автоматически должны повторяться имя и телефон из формы-1.
                                                  Эти коды я «спионерила» с другого сайта. Там все работает. На моем нет. Не пойму почему.

                                                  Форма-1
                                                  <form method="post" id="first-form" class="big-form alCenter" action="мой сайт/order.html">
                                                  
                                                  <div class="input-block">
                                                  <input type="text" class="inputbox" placeholder="Ваше имя" name="name" required></div>
                                                  <div class="input-block">
                                                  <input type="text" placeholder="Ваш номер" name="phone" class="numbox inputbox phone-mask" required></div>
                                                  
                                                  <button type="submit" class="btn2 db w100">ЗАКАЗАТЬ СО СКИДКОЙ</button></form>
                                                  
                                                  <script>
                                                  var form1 = document.getElementById("first-form");
                                                  form1.addEventListener("submit", function (event) {
                                                  var name = form1.elements.name.value;
                                                  var phone = form1.elements.phone.value;
                                                              
                                                  var memory5 = window.location.search;
                                                              
                                                  if (memory5) {
                                                  var result_url = "мой сайт/order.html" + memory5 + "&name=" + name + "&phone=" + phone;
                                                  } else {
                                                  var result_url = "мой сайт/order.html?name=" + name + "&phone=" + phone;
                                                  }
                                                  form1.elements.result_url.value = result_url;
                                                  });
                                                  </script>
                                                  
                                                  Приветствие другой странице сайта:
                                                  <h1 class="alCenter">
                                                  <span id="visitorName"></span>, НАША КОМАНДА ВЫРАЖАЕТ БЛАГОДАРНОСТЬ
                                                  <script>
                                                  	var visitorName = document.getElementById("visitorName");
                                                      var url_string = window.location.href;
                                                      var url = new URL(url_string);
                                                      var paramValue = url.searchParams.get("name");
                                                      visitorName.innerHTML = paramValue;
                                                  </script>
                                                  </h1>
                                                  
                                                  Форма-2
                                                  <form method="post" id="mainform" class="big-form" action="mail.php">
                                                  
                                                  <div class="input-block"><input required type="text" name="name" placeholder="Ваше имя" class="inputbox" required></div>
                                                  <div class="input-block"><input required type="text" name="phone" placeholder="Ваш номер" class="inputbox numbox phone-mask" required></div>
                                                  <div class="input-block"><input required type="text" id=numNabor name="comment" placeholder="Набор № " class="inputbox" required></div>
                                                  <button type="submit" class="btn2 w100">ПОДТВЕРДИТЬ ЗАКАЗ</button>
                                                  </form>
                                                  
                                                  1. Andy Si21 октября 2020, 09:27#
                                                    Скорее всего, проблема в этой строчке:
                                                    form1.elements.result_url.value = result_url;
                                                    Попробуй заменить на:
                                                    document.location.href = result_url;
                                                    1. Елена
                                                      Елена21 октября 2020, 19:05#
                                                      спасибо за ответ!
                                                      но не работает(
                                                      1. Andy Si22 октября 2020, 11:01#
                                                        Значит что-то ещё не так. Код вполне рабочий.
                                                        1. Елена
                                                          Елена22 октября 2020, 23:41#
                                                          А Вы можете предложить свой вариант?
                                                          1. Andy Si23 октября 2020, 09:12#
                                                            К сожалению, не смогу, нет времени на это.
                                              2. Наталья
                                                Наталья01 февраля 2021, 22:30#
                                                Добрый вечер! У меня есть такой код. Сейчас каждая последующая строка открывается по нажатию с одновременным закрытием предыдущей. А необходимо сделать так, чтобы нажатием на любую строку она открывалась и одновременно закрывалась любая открытая строка. Никак не разберусь, что поправить необходимо?
                                                <span onclick="document.getElementById('line3').style.display='inline-block'; document.getElementById('open2').style.display='none'; document.getElementById('line2').style.display='none'"><strong>Прямо в карман - нельзя: </strong><span id="open2" style="display: inline">>>></span></span>
                                                        <span id="line3" style="display:none">туда потом может попасть носовой платок.</span>
                                                        
                                                
                                                        <span onclick="document.getElementById('line4').style.display='inline-block'; document.getElementById('open3').style.display='none'; document.getElementById('line3').style.display='none'"><strong>На стол, на подоконник - нельзя: </strong><span id="open3" style="display: inline">>>></span></span>
                                                        <span id="line4" style="display:none">там вирус останется жить долго.</span>
                                                        
                                                
                                                        <span onclick="document.getElementById('line5').style.display='inline-block'; document.getElementById('open4').style.display='none'; document.getElementById('line4').style.display='none'"><strong>На стул, на кровать - нельзя: </strong><span id="open4" style="display: inline">>>></span></span>
                                                        <span id="line5" style="display:none">оттуда вирус попадет на одежду.</span>
                                                
                                                1. Andy Si02 февраля 2021, 09:54#
                                                  Добрый день. В этом примере всё надо переписывать — разметку, стили и скрипт выносить в отдельный блок.
                                                  <p class="item"><strong>Прямо в карман - нельзя: </strong><span class="arrows"> >>> </span>
                                                     <span class="more">туда потом может попасть носовой платок.</span>
                                                  </p>
                                                  
                                                  <p class="item"><strong>На стол, на подоконник - нельзя: </strong><span class="arrows"> >>> </span>
                                                     <span class="more">там вирус останется жить долго.</span>
                                                  </p>
                                                  
                                                  <p class="item"><strong>На стул, на кровать - нельзя: </strong><span class="arrows"> >>> </span>
                                                     <span class="more">оттуда вирус попадет на одежду.</span>
                                                  </p>
                                                  
                                                  <style>
                                                  .item .more { display: none; }
                                                  .item.active .arrows { display: none; }
                                                  .item.active .more { display: inline; }
                                                  </style>
                                                  
                                                  <script>
                                                  document.querySelectorAll('.item').forEach(function(el) {
                                                  	el.onclick = function(e) {
                                                  	   document.querySelectorAll('.item').forEach(function(el) {
                                                       	 el.classList.remove("active");
                                                       });
                                                       this.classList.add("active");
                                                  	}
                                                  });
                                                  </script>
                                                  
                                                  
                                                  Надеюсь, разберетесь.
                                                  1. Наталья
                                                    Наталья02 февраля 2021, 19:45#
                                                    Благодарю Вас, в каждое слово вникну :)
                                                    1. Наталья
                                                      Наталья03 февраля 2021, 10:50#
                                                      Еще раз спасибо за развернутый ответ. Со всем разобралась!
                                                      1. Andy Si03 февраля 2021, 11:38#
                                                        Отлично :)
                                                  2. Khulzat
                                                    Khulzat03 февраля 2021, 19:29#
                                                    Как можно покрасить бока картинки через CSS на HTML?
                                                    1. Andy Si04 февраля 2021, 09:15#
                                                      Наложить поверх блок с абсолютным позиционированием и задать для него правильно тени нужного цвета.
                                                    2. Поседевший От Приведения
                                                      Поседевший От Приведения22 октября 2022, 02:34(был изменён)#
                                                      науя было вставлять приведение??? сижу в 3 часа ночи один в доме. и детский голос приведения этот дурацкий. бывает, что ночью ребенок просыпается и плачет -> а блин детей сегодня дома нет. реально испугался — пока картинку приведения не увидел…

                                                      Смешно конечно получилось )

                                                      Автору респект за статью! нашел как правильно и быстро перебрать множество элементов с одинаковым классом в многоуровневом списке и повесить на них событие.
                                                      1. Andy Si22 октября 2022, 11:08#
                                                        Спасибо. Прошу прощения за привидение. Вам крупно «повезло» что его увидели :) Появляется крайне редко, шанс увидеть 1 из 1000, а может и меньше :)
                                                      2. Негрик
                                                        Негрик28 января 2023, 22:21#
                                                        Привет! а как можно поменять фон кнопки при нажатии на кнопку??

                                                        1. Andy Si30 января 2023, 09:42#
                                                          Разные способы есть, смотря какой обработчик нажатия. Самое простое при нажатии выбрать кнопку через селектор по идентификатору и задать фон:
                                                          document.getElementById('myButton').style.backgroundColor = '#F00'
                                                        © REALADMIN.RU   2024 г.
                                                        Страница сгенерирована: 0,2248 s | 6 mb.
                                                        На каком уровне Вы играете в шахматы?
                                                        OPROS