Серьезный заработок в интернете и создание сайтов

Всем привет. Речь конечно же пойдет о кнопке на странице сайта или какого-то веб-приложения. Мы будем делать ее неактивной через JS, но для этого нам нужно создать условие, то есть в каких случаях кнопка будет неактивной, потому что оставлять е в этом положении навсегда не имеет смысла. В большинстве случаев это делается при проверке каких-то данных в форме и там как раз есть условие — если проверка на заданные условия пройдена, то кнопку сделаем активной, если нет — нажатие на кнопку будет запрещено. Я уже писал про валидацию номера телефона на JS, поэтому мы можем частично воспользоваться кодом, который приведен в статье. неактивная кнопка а HTML выглядит так:

Кнопка

<button disabled="true">Кнопка</button>

Или так:

<input type="submit" disabled value="Кнопка"/>

А так же:

<button disabled>Кнопка</button>

<input type="submit" disabled value="Кнопка"/>

То есть кнопке просто добавляется атрибут disabled и дальше будет зависеть от контекста. В каких случаях атрибуту присваивать значение TRUE, а в каких FALSE. Теперь можно перейти к конкретным примерам.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function validatePhone(phone){
 var regex = /^(\+7|7|8)?[\s\-]?\(?[489][0-9]{2}\)?[\s\-]?[0-9]{3}[\s\-]?[0-9]{2}[\s\-]?[0-9]{2}$/;
 return regex.test(phone);
}
 
let inp = document.querySelector('.inp');
let btn = document.querySelector('.btn');
btn.setAttribute('disabled', true);
 
inp.oninput = function(){
  let phone = document.querySelector('.inp').value;
  if (!validatePhone(phone)){
    btn.setAttribute('disabled', true);
  }else{
    btn.removeAttribute('disabled');
  }
}

Демо

Эта конструкция кода проверяет номер телефона в формате +7 и пока не будет введен верный номер в поле — кнопка останется неактивной. Как только номер будет соответствовать заявленным требованиям, то есть регулярному выражению — кнопка станет активной. То же самое мы можем сделать для Email адреса. Все, что нужно сделать, это поменять регулярное выражение в переменной regex, которое будет проверять именно Email.

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

Привет, друзья. Есть задача: по нажатию одной кнопки должно срабатывать 2 функции в JS. Решается это очень просто, но у многих начинающих изучать программирование почему-то возникают с этим трудности. Давайте разберем пример с двумя функциями на событии onclick. И как и в предыдущем примере, когда мы делали нажатие на копку в JavaScript, можно пойти двумя способами. На странице есть такая кнопка:

<button type="submit" id="submit">Нажми меня</button>

Первый вариант:

1
2
3
4
5
6
7
8

document.querySelector("#submit").onclick = function(){
  console.log("Результат работы функции 1");
send2();
}
 
function send2(){
  console.log("Результат работы функции 2");
}

В итоге в консоли мы увидим ожидаемый результат:

Обе функции можно написать отдельно, что будет более правильным решением.

1
2
3
4
5
6
7

function send1(){
  console.log("Результат работы функции 1");
}
 
function send2(){
  console.log("Результат работы функции 2");
}

А потом написать либо так:

1
2
3
4

document.querySelector("#submit").onclick = function(){
send1();
send2();
}

Либо так:

<button type="submit" id="submit" onclick="send1(); send2();">Нажми меня</button>

И таким образом кнопка будет обрабатывать сразу две кнопки, то есть будут происходить какие-то действия по нажатию одной кнопки. И как вы смогли догадаться — функций на одно событие можно повесить гораздо больше, чем две. Единственное о чем нужно подумать, это о целесообразности такого подхода. Действительно ли нужна такая необходимость?

Привет всем любителя программирования. Это довольно простой урок по такому событию в JavaScript, как нажатие на кнопку. не смотря на то, что это базовые вещи в JS, реализовать нажатие на кнопку можно разными способами. Давайте предположим, что у нас на странице есть некая кнопка.

<button type="submit" id="submit">Нажми меня</button>

Она пока никак не реагирует потому, что мы не повесили на нее никакого события. И давайте рассмотрим первый вариант.

1
2
3

document.querySelector("#submit").onclick = function(){
  alert("Вы нажали на кнопку");
}

Демо

Функция по нажатию кнопки в JavaScript

Событие по клику на кнопку мы создали, но можно сделать то же самое, только напишем функцию, с именем.

1
2
3

function alerted(){
  alert("Вы нажали на кнопку");
}

А к кнопке добавим эту функцию:

<button type="submit" id="submit" onclick="alerted();">Нажми меня</button>

Демо

Вывод на страницу по клику на кнопку в JS

Соответственно по нажатию на кнопку в JavaScript можно делать не только всплывающий alert, но и все, что угодно, передавать данные на сервер, изменять элементы на странице, удалять, копировать и много чего еще. Давайте рассмотрим еще один пример. напишем небольшую функцию, которая будет срабатывать по клику и выводить на страницу случайное число. Для этого под кнопкой добавим элемент DIV с классом sum, в котором будем выводить результат работы JavaScript функции.

<div class="sum"></div>

И сама функция:

1
2
3

function randomSum(min, max) {
  document.querySelector('.sum').innerHTML = (Math.floor(Math.random() * (max - min + 1) ) + min);
}

Для кнопки добавим эту функцию по нажатию:

<button type="submit" id="submit" onclick="randomSum(1000, 9999);">Нажми меня</button>

По нажатию на кнопку под ней будет выведено четырехзначное число от 1000 до 9999 в случайном порядке. Это мы указали в специальных параметрах min и max.

Демо

Нажатие правой кнопкой мыши в JS

Событие клика правой кнопкой мыши в JavaScript отличается от левой и по умолчанию вызывает стандартное контекстное меню браузера. Но мы его можем изменить. Во-первых убрать, а во-вторых задать свое действие.

Запрещаем вывод контекстного меню при клике правой кнопкой мыши:

1

<button type="submit" id="submit" oncontextmenu="return false">Нажми меня</button>

Выводим Alert:

1
2
3
4

document.querySelector("#submit").oncontextmenu = function(){
  alert("Вы нажали на кнопку");
  return false
}

Демо

Это простейший вызов функции по клику в JavaScript и усваивается без особых трудностей. В дальнейшем рекомендую изучать более сложные функции, которые делают различные операции. Например считают сумму, как в калькуляторе расчета стоимости. Надеюсь этот урок оказался для вас полезным. Если остались вопросы, вы всегда можете задать их в комментариях.