Вызвать функцию js файлу для кнопки
I am trying to use an HTML button to call a JavaScript function.
It doesn't seem to work correctly though. Is there a better way to do this?
Yeah, turns out document.all is a nonstandard IE thing; updated my answer with a suggested alternative.
@paper1337, @Jeff: The function still doesn't achieve the desired effect in IE8, so even swapping document.all for document.getElementById won't fix it.
Как вызвать функцию JavaScript с помощью обработчиков событий в HTML
Исходный код HTML
Ты можешь написать или скопировать исходный код HTML ниже в свой HTML-документ, index.html . Этот исходный код HTML показывает текстовое поле и кнопку отправки. Пользователи могут ввести имя в текстовое поле.
Исходный код JavaScript
Ты можешь написать или скопировать приведенный ниже исходный код в свой файл JavaScript, scripts.js
В этом примере обработчик событий onclick вызывает функцию showAlert(). Этот вызов функции происходит, когда вы нажимаете кнопку отправки HTML.
Ожидаемые результаты
Вывод на страницу по клику на кнопку в JS
Соответственно по нажатию на кнопку в JavaScript можно делать не только всплывающий alert, но и все, что угодно, передавать данные на сервер, изменять элементы на странице, удалять, копировать и много чего еще. Давайте рассмотрим еще один пример. напишем небольшую функцию, которая будет срабатывать по клику и выводить на страницу случайное число. Для этого под кнопкой добавим элемент DIV с классом sum, в котором будем выводить результат работы JavaScript функции.
function randomSum(min, max)
Для кнопки добавим эту функцию по нажатию:
По нажатию на кнопку под ней будет выведено четырехзначное число от 1000 до 9999 в случайном порядке. Это мы указали в специальных параметрах min и max.
Как использовать слушатели событий для вызова функции JavaScript в HTML
Ты можешь использовать слушатели событий JavaScript для прослушивания событий и вызова функций.
Метод слушателя событий присоединяет слушатель событий к объекту и вызывает нужную функцию при запуске определенного события на объекте.
Это самый мощный, но гибкий подход к вызову функций из HTML.
JavaScript предлагает следующие два метода слушателя событий, которые можно использовать с объектами JavaScript-
- addEventListener() - Добавляет обработчик событий в HTML-элемент и вызывает функции в указанном событии.
- removeEventListener() - Удаляет обработчик событий из HTML-элемента.
Вы должны передать следующие параметры этим методам слушателя событий JavaScript -
- Название события - Вам необходимо передать фактическое имя события HTML DOM. Пример нескольких распространенных событий - щелчок, изменение, фокусировка, перемещение мыши и т.д.
- Имя функции - Вы должны передать здесь имя функции. Браузер вызывает эту функцию в ответ на описанное выше событие на объекте.
- Ты можешь назначить объекту любое количество слушателей событий. Таким образом, ты можешь выполнить несколько вызовов функций в одном событии элемента управления HTML.
Нажатие правой кнопкой мыши в JS
Событие клика правой кнопкой мыши в JavaScript отличается от левой и по умолчанию вызывает стандартное контекстное меню браузера. Но мы его можем изменить. Во-первых убрать, а во-вторых задать свое действие.
Запрещаем вывод контекстного меню при клике правой кнопкой мыши:
Это простейший вызов функции по клику в JavaScript и усваивается без особых трудностей. В дальнейшем рекомендую изучать более сложные функции, которые делают различные операции. Например считают сумму, как в калькуляторе расчета стоимости. Надеюсь этот урок оказался для вас полезным. Если остались вопросы, вы всегда можете задать их в комментариях.
Как всегда интересно и доступно. Намедни, писал калькулятор расчёта цены металлической решётки на JS и пытался вызвать срабатывание двух фуекций одновременно по нажатию кнопки. Запускались два массива радиокнопок с разными именами и дальше использовались для расчётов. Не получилось и даже пишут, что это не возможно.
Интересует ваше мнение вызова нескольких функций по нажатию только одной кнопки.
Проблем с запуском 2-х функций в JS возникать не должно. Просто эти функции нужно написать отдельно. Возможно у вас какой-то конфликт в коде.
Имеется в виду есть 2 групы или более радио кнопок с возможностью выбора только одной кнопки в каждой группе по параметру value. Хотелось бы написать один код, в котором поставив чекбоксы в радио кнопках использовать их значениня value в этом коде дальше по нажатию кнопки РАССЧИТАТЬ. Каждая группа кнопок перебирается в цикле и определяется значение value одной и второй группы. На самом деле, записав оба цикла последовательно в коде не удаётся далье воспользоваться полученными значениями велью. Если радио кнопки не зависимые, тогда всё в порядке, а если с одним именем не получается.
Не совсем понял. Можно попробовать использовать this и написать один цикл.
Спасибо. Буду пробовать.
Всплывает модальное окно подписки и зависает. Дальше не реагирует.
Доброго времени суток! а как быть в случае когда надо на одной странице несколько раз выполнить одинаковый код обновление div-а с помощью Ajax?
Пример: есть страница строки/столбцы. В одном из столбцов (для каждой строки) есть номер и ттн. По нажатию на кнопку происходит отправка данных. php возвращает некий ответ. Этот ответ отображается в div под кнопкой отправки. Но такая конструкция срабатывает только один раз для первого элемента
$.ajax( type: «POST»,
url: url,
data: form.serialize(),
success: function(html) $(»).html(html);>>);
return false;
>);
Вам скорее всего нужен формат Json. Об этот я писал здесь.
Данные отправляются через эту конструкцию нормально. php тоже отрабатывает возвращая нужную строку. После в строке success результат от php присваивается некому div-у на странице. Но если это код повторить несколько раз на одной странице то все, которые ниже уже не работают (я так понимаю, что это из за уникальности id-шников)
Соответственно id должны быть разными.
Добрый день , Ребята кто может помочь за $ единоразово отредактировать javascript? Буду очень благодарен .!
Давайте напишем простую функцию, которая возвращает массив из трех элементов — текущего значения this и двух аргументов, переданных в функцию.
Самый распространенный способ: глобальный вызов
Новички часто объявляют функции так, как показано в примере выше. Вызвать эту функцию не составляет труда:
Погодите. Откуда взялся объект window ? Почему это у нас this равен window ?
В JavaScript, неважно, выполняется ли скрипт в браузере или в ином окружении, всегда определен глобальный объект. Любой код в нашем скрипте, не «привязанный» к чему-либо (т.е. находящийся вне объявления объекта) на самом деле находится в контексте глобального объекта. В нашем случае, makeArray — не просто функция, «гуляющая» сама по себе. На самом деле, makeArray — метод глобального объекта (в случае исполнения кода в браузере) window . Доказать это легко:
То есть вызов makeArray('one', 'two'); равносилен вызову window.makeArray('one', 'two'); .
Меня печалит тот факт, что этот способ вызова функций наиболее распространен, ведь он подразумевает наличие глобальной функции. А мы все знаем, что глобальные функции и переменные — не самый хороший тон в программировании. Особенно это справедливо для JavaScript. Избегайте глобальных определений, и не пожалеете.
Правило вызова функций №1: Если функция вызывается напрямую, без указания объекта (например, myFunction() ), значением this будет глобальный объект ( window в случае исполнения кода в браузере).
Вызов метода
Давайте создадим простой объект и сделаем makeArray его методом. Объект объявим с помощью литеральной нотации, а после вызовем наш метод:
Видите разницу? Значение this в этом случае — сам объект. Почему не window , как в предыдущем случае, ведь объявление функции не изменилось? Весь секрет в том, как передаются функции в JavaScript. Function — это стандартный тип JavaScript, являющийся на самом деле объектом, и как и любой другой объект, функции можно передавать и копировать. В данном случае, мы как бы скопировали всю функцию, включая список аргументов и тело, и присвоили получившийся объект свойству make объекта arrayMaker . Это равносильно такому объявлению:
Правило вызова функций №2: В функции, вызванной с использованием синтаксиса вызова метода, например, obj.myFunction() или obj['myFunction']() , this будет иметь значение obj .
Непонимание этого простого, в общем-то, принципа часто приводит к ошибкам при обработке событий:
При использовании библиотек вроде jQuery думать об этом не надо. jQuery позаботится о том, чтобы переписать значение this в обработчике события так, чтобы значением this был элемент, вызвавший событие:
Каким образом jQuery удается изменить значение this ? Читайте ниже.
Еще два способа: apply() и call()
Логично, что чем чаще вы используете функции, тем чаще вам приходится передавать их и вызывать в разных контекстах. Зачастую возникает необходимость переопределить значение this . Если вы помните, функции в JavaScript являются объектами. На практике это означает, что у функций есть предопределенные методы. apply() и call() — два из них. Они позволяют переопределять значение this :
Эти два метода очень похожи. Первый параметр переопределяет this . Различия между ними заключаются в последющих аргументах: Function.apply() принимает массив значений, которые будут переданы функции, а Function.call() принимает аргументы раздельно. На практике, по моему мнению, удобнее применять apply() .
Правило вызова функций №3: Если требуется переопределить значение this , не копируя функцию в другой объект, можно использовать myFunction.apply( obj ) или myFunction.call( obj ) .
Конструкторы
Я не буду подробно останавливаться на объявлении собственных типов в JavaScript, но считаю необходимым напомнить, что в JavaScript нет классов, а любой пользовательский тип нуждается в конструкторе. Кроме того, методы пользовательского типа лучше объявлять через prototype , который является свойством фукции-конструктора. Давайте создадим свой тип:
Важным в этом примере является наличие оператора new перед вызовом функции. Если бы не он, это был бы глобальный вызов, и создаваемые в конструкторе свойства относились бы к глобальному объекту. Нам такого не надо. Кроме того, в конструкторах обычно не возвращают значения явно. Без оператора new конструктор вернул бы undefined , с ним он возвращает this . Хорошим стилем считается наименование конструкторов с заглавной буквы; это позволит вспомнить о необходимости оператора new .
В остальном, код внутри конструктора, скорее всего, будет похож на код, который вы написали бы на другом языке. Значение this в данном случае — это новый объект, который вы создаете.
Правило вызова функций №4: При вызове функции с оператором new , значением this будет новый объект, созданный средой исполнения JavaScript. Если эта функция не возвращает какой-либо объект явно, будет неявно возвращен this .
Заключение
Надеюсь, понимание разницы между разными способами вызова функций возволит вам улучшить ваш JavaScript-код. Иногда непросто отловить ошибки, связанные со значением this , поэтому имеет смысл предупреждать их возникновение заранее.
Такое простое событие, как onclick в javascript, может быть вызвано несколькими способами и скрыает некоторые тонкости. Событие происходит при клике по элементу левой кнопкой мыши. Стоит заметить, что при клике происходит так же ещё два события, а именно нажатие на кнопку мыши и её отжатие.
Все примеры будем рассматривать на теге «a» (ссылку). Пусть это не смущает, с другими тегами будет работать аналогичным образом.
Самый простой способ повесить событие onclick, это прописать его непосредственно в html теге:
Рассмотренный вариант можно использовать если событие содержит мало кода. Иначе, следует обратить внимание на другие способы.
Вешаем onclick на элемент из javascript-кода
Рассмотим еще один способ, на мой взгляд, самый практичный и надежный. Хорош он тем, что событие можно повесить на множество элементов. Для этого требуется выбрать при помощи javascript-селекторов элементы, к которым требуется применить событие onclick.
Выбору элементов по селекторам можно посвятить отдельную тему, могу сказать только то, что согласно новой спецификации HTML5, их выбор стал прост и в javascript. Если Вы знакомы с jquery или CSS, то выбрать нужные элементы для Вас не составит труда. Например, так просто можно выбрать все элементы с классом «link» и повесить на них нужное действие:
Пример кодирования для вызова функции JavaScript с использованием слушателей событий
Исходный код HTML
Ты можешь написать или скопировать исходный код HTML ниже в свой HTML-документ, index.html . Этот исходный код HTML показывает текстовое поле и кнопку отправки. Пользователи могут ввести имя в текстовое поле.
Исходный код JavaScript
Внешний файл JavaScript, scripts.js должен иметь исходный код ниже -
Ожидаемые результаты
Привет всем любителя программирования. Это довольно простой урок по такому событию в JavaScript, как нажатие на кнопку. не смотря на то, что это базовые вещи в JS, реализовать нажатие на кнопку можно разными способами. Давайте предположим, что у нас на странице есть некая кнопка.
Она пока никак не реагирует потому, что мы не повесили на нее никакого события. И давайте рассмотрим первый вариант.
Выносим код события onclick в javascript-функцию
Следующий способ хорош тем, что мы отделяем javascript-код от html тегов. В теге прописываем название функции, а саму функцию выносим в отдельный блок:
Но и здесь всё не идеально. Что делать, если событие требуется повесить на все ссылыки сайта, а их сотни? Кажется что это трудно, а на деле — меньше десяти строк кода. Задача решается с помощью селекторов. В примере опять будем производить действия с тегом «a», но ничего не мешает использовать вместо ссылки «img» или «div».
Использование функций JS с атрибутами событий HTML
Ты можешь использовать атрибуты события в элементе управления HTML для вызова функции Javascript при возникновении события.
HTML предоставляет набор таких атрибутов для охвата широкого спектра событий.
Несколько распространенных примеров - onclick , onchange , onload , onmouseover , onmouseout и onkeydown .
Пожалуйста, имейте в виду, что атрибуты событий HTML работают только с активными элементами управления. Кнопки и ссылки являются немногими примерами таких элементов управления.
Это, пожалуй, самый простой подход для вызова функции JavaScript из HTML-элемента.
Как вызвать функцию JavaScript с помощью атрибутов событий HTML
Вам нужно будет создать файл HTML и JavaScript, чтобы опробовать этот пример. Давайте создадим index.html для исходного кода HTML и scripts.js для исходного кода JavaScript. Мы также будем использовать эти исходные коды для последующих примеров с минимальными изменениями.
Исходный код HTML
Ты можешь написать или скопировать приведенный ниже исходный код в свой index.html . Этот исходный код HTML показывает текстовое поле и кнопку отправки. Пользователи могут ввести имя в текстовое поле.
Исходный код JavaScript
Давайте напишем приведенный ниже исходный код в scripts.js файл -
Ожидаемые результаты
8 Answers 8
There are a few ways to handle events with HTML/DOM. There's no real right or wrong way but different ways are useful in different situations.
1: There's defining it in the HTML:
2: There's adding it to the DOM property for the event in Javascript:
3: And there's attaching a function to the event handler using Javascript:
Both the second and third methods allow for inline/anonymous functions and both must be declared after the element has been parsed from the document. The first method isn't valid XHTML because the onclick attribute isn't in the XHTML specification.
The 1st and 2nd methods are mutually exclusive, meaning using one (the 2nd) will override the other (the 1st). The 3rd method will allow you to attach as many functions as you like to the same event handler, even if the 1st or 2nd method has been used too.
Most likely, the problem lies somewhere in your CapacityChart() function. After visiting your link and running your script, the CapacityChart() function runs and the two popups are opened (one is closed as per the script). Where you have the following line:
Try the following instead:
EDIT
When I saw your code I thought you were writing it specifically for IE. As others have mentioned you will need to replace references to document.all with document.getElementById . However, you will still have the task of fixing the script after this so I would recommend getting it working in at least IE first as any mistakes you make changing the code to work cross browser could cause even more confusion. Once it's working in IE it will be easier to tell if it's working in other browsers whilst you're updating the code.
В этом уроке ты узнаешь, как вызывать функции JavaScript с HTML-страниц, чтобы сделать их интерактивными.
HTML и CSS могут структурировать веб страницу и сделать ее красивой. JavaScript помогает веб-странице взаимодействовать с пользователями и направлять их к нужной информации.
Ты можешь использовать функции JavaScript для создания веб-сайтов, которые реагируют на обычные события пользователя, такие как клики, нажатия клавиш, загрузка страницы, наведение курсора мыши.
Я расскажу шаг за шагом о вызове функций JavaScript в HTML, чтобы помочь тебе понять основные концепции веб-разработки с помощью простых в использовании примеров кода.
Применяем jQuery
Если в проекте используется библиотека jQuery, то можно ещё упростить код. Рассмотрим два самых распространенных способа:
И ещё один вариант, который идентичен предыдущему.
С обработчиком «on()» лучше ознакомиться отдельно, так как он несет в себе много полезного функционала. Например, возможность указать через пробел несколько событий к которым будет применяться действие, делегировать события на дочерние элементы, а так же он полезен если необходимо повесить событие на динамически добавляемые элементы, которых изначально нет на странице.
Использование функций JS с обработчиками событий JavaScript
JavaScript предоставляет набор свойств обработчика событий, способных выполнять вызовы функций. Ты можешь использовать их с объектами JavaScript для вызова функций в случае элемента управления HTML.
Каждое из этих свойств соответствует определенному событию. Несколько распространенных примеров - “onload”, “onclick”, “onmouseover”, “onmouseout” и “onkeydown”. Ты можешь получить полный список со многих веб-сайтов в Интернете.
Обработчики событий JavaScript также работают с элементами HTML, не требующими действий. Это означает, что ты можешь превратить даже элемент “
Обработчики событий JavaScript могут вызывать только одну функцию в событии для элемента HTML. Это ограничение, которое прокладывает путь для слушателей событий Javascript, чтобы войти в картину.
Функция по нажатию кнопки в JavaScript
Событие по клику на кнопку мы создали, но можно сделать то же самое, только напишем функцию, с именем.
А к кнопке добавим эту функцию:
Читайте также: