Html вызов функции кнопкой

How to Make Button onclick in HTML

The onclick attribute is an event attribute that is supported by all browsers. It appears when the user clicks on a button element. If you want to make a button onclick, you need to add the onclick event attribute to the element.

How to add URL to the window object

The button onclick runs a script when the user clicks a button. Let’s see an example where we have a button, clicking on which you’ll go to our website. To achieve this, we’ll just add the URL of the website to the window object.

Example of adding URL to the window object:

html> html> head> title>Title of the document title> head> body> button onclick="window.location.href='https://w3docs.com';">Click Here button> body> html>

You can also use a button onclick in order to know the current date just by adding «getElementById(‘demo’).innerHTML=Date()» to the onclick event.

Example of using a button onclick to know the current date:

html> html> head> title>Title of the document title> head> body> p>Click the button to see the current date. p> button onclick="getElementById('demo').innerHTML=Date()">What day is today? button> p id="demo"> p> body> html>

The onclick event is used to call a function when an element is clicked. That is why it is mostly used with the JavaScript function. Let’s consider an example where you need to click the button to set a function that will output a message in a element with id=»demo».

Example of adding an onclick event:

html> html> head> title>Title of the document title> head> body> p>There is a hidden message for you. Click to see it. p> button onclick="myFunction()">Click me! button> p id="demo"> p> script> function myFunction( ) < document.getElementById("demo").innerHTML = "Hello Dear Visitor!
 We are happy that you've chosen our website to learn programming languages. We're sure you'll become one of the best programmers in your country. Good luck to you!"; > script> body> html>

Источник

HTML onclick Event Attribute

The onclick attribute fires on a mouse click on the element.

Browser Support

Syntax

Attribute Values

Technical Details

More Examples

Example

Click on a

element to change its text color to red:

Click me to change my text color.

Example

Click on a button to copy some text from an input field to another input field:

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Нажатие на кнопку в JavaScript (событие и функции)

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

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

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

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

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

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

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

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

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

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

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

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

function randomSum(min, max)

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

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

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

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

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

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

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

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

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

Читайте также:

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

Проблем с запуском 2-х функций в JS возникать не должно. Просто эти функции нужно написать отдельно. Возможно у вас какой-то конфликт в коде.

Имеется в виду есть 2 групы или более радио кнопок с возможностью выбора только одной кнопки в каждой группе по параметру value. Хотелось бы написать один код, в котором поставив чекбоксы в радио кнопках использовать их значениня value в этом коде дальше по нажатию кнопки РАССЧИТАТЬ. Каждая группа кнопок перебирается в цикле и определяется значение value одной и второй группы. На самом деле, записав оба цикла последовательно в коде не удаётся далье воспользоваться полученными значениями велью. Если радио кнопки не зависимые, тогда всё в порядке, а если с одним именем не получается.

Доброго времени суток! а как быть в случае когда надо на одной странице несколько раз выполнить одинаковый код обновление div-а с помощью Ajax?
Пример: есть страница строки/столбцы. В одном из столбцов (для каждой строки) есть номер и ттн. По нажатию на кнопку происходит отправка данных. php возвращает некий ответ. Этот ответ отображается в div под кнопкой отправки. Но такая конструкция срабатывает только один раз для первого элемента $.ajax( type: «POST»,
url: url,
data: form.serialize(),
success: function(html) $(»).html(html);>>);
return false;
>);

Данные отправляются через эту конструкцию нормально. php тоже отрабатывает возвращая нужную строку. После в строке success результат от php присваивается некому div-у на странице. Но если это код повторить несколько раз на одной странице то все, которые ниже уже не работают (я так понимаю, что это из за уникальности id-шников)

Добрый день , Ребята кто может помочь за $ единоразово отредактировать javascript? Буду очень благодарен .!

Источник