Onclick не работает html

Не работает onclick по нажатию кнопки

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Не работает onclick кнопки
Есть такой скрипт: 10

Нет, не устроит. Хотя бы чтобы в хроме работал.

Добавлено через 8 минут

Visary_Master, конструкция является нестандартной и поддерживается только браузером MSIE.
Прочие браузеры не знают и не поддерживают атрибутов FOR и EVENT для тега
Click me

Где написано onclick в вашем коде вместо английской буквы «c» написана русская «с».

Либо это действительно шутка,
либо кто-то так специально написал, чтобы типа вручную код переписывали, а не копировали.

onclick по нажатию на ссылке
Доброго времени суток. По нажатию на ссылку должна выполнятся функция. Делаю так:

Добавление текстбоксов по нажатию клавиши и удаление по нажатию другой кнопки
Всем доброго времени суток. Хотел попросить помощи в написании следующего кода. Кое что набросал.

Разбить строку на слова по нажатию первой кнопки, отсортировать список слов по нажатию второй
Разбить строку, введённую в первую ячейку первого столбца активного листа, на слова, и вывести их в.

Нарисовать домик по нажатию кнопки, и звезду по нажатию на форме
Нарисовать домик по нажатию кнопки и звезду по нажатию на форме

вызов onclick-обработчика по нажатию enter
Требуется чтобы когда фокус на кнопке, вызывалась/лись функция/и, привязанная/ые к onclick .

Прорисовка в окне по нажатию кнопки(обработчик кнопки) MFC
Сообсвтенно вот какая пробелма. Создал кнопку, в ее обработчике написал, что по 2-ому нажатию левой.

Источник

onClick / onclick не работает должным образом в HTML5 / JavaScript

Я пытаюсь сделать что-то очень простое — вызвать функцию при нажатии кнопки. Я просмотрел несколько примеров в Интернете, таких как W3Schools и (я полагаю), я использую onclick / onClick правильно, похоже, он не работает. Я пробовал несколько разных методов — я действительно не уверен, что я делаю неправильно.

Метод 1

Когда кнопка нажата, она мигает в файле console.log быстрее, чем я могу видеть, а затем исчезает.

Метод 2

Когда кнопка нажата, она мигает в файле console.log быстрее, чем я могу видеть, а затем исчезает.

Метод 3

Это появляется в журнале консоли и остается там без нажатия кнопки.

Я обычно чувствую себя смущенным. Из того, что я могу сказать, я делаю то, что предлагают примеры (различные методы, которые я пробовал, отражают различия в примерах).

Так что, похоже, проблема в том, что console.log мигает почти быстрее, чем я вижу . Кто-нибудь знает, почему это может быть? Кажется, что страница обновляется сама, но я понятия не имею, почему это будет .

Кнопка была в форме, которая заставляла страницу обновляться при нажатии.

4 ответа

Проблема в названии вашей функции. это то же самое, что и идентификатор элемента. сделайте тест и попробуйте написать это console.log(add) . Вы увидите, что он регистрирует узел DOM, а не функцию.

Ваша кнопка в форме? потому что если это так, то форма отправляется, и поэтому страница обновляется. Вы можете опубликовать jsfiddle с вашим тестом?

Мой был немного другим, хотя я получил помощь от ответа @ TheBrain. Имя моего метода javascript было submit() , которое фактически отправляло мою форму. Когда я изменил имя метода на submitForm() , это сработало.

Я думаю, что ранее submit() внутренне вызывал Javascript Form submit() , а не мой метод javascript.

Когда кнопка нажата, она мигает в файле console.log быстрее, чем я могу видеть, а затем исчезает.

Это подозрительно — вывод консоли обычно не очищается без участия пользователя.

Может ли быть так, что ваша страница просто перезагружается — и поэтому вывод консоли «исчезает»?

В общем, вы все равно не должны больше использовать этот тип «старой школы» для обработки событий (если только это не для чего-то действительно мелкого масштаба).

Посмотрите на популярные библиотеки JS, такие как jQuery и т. Д. — они значительно упрощают обработку событий (среди прочего).

Что касается метода 1:

Мне нужно было бы увидеть немного больше вашей html-структуры, чтобы сказать наверняка, но это звучит как в методе 1, функция не объявляется должным образом, что находится в области видимости. Это может быть связано с тем, что имена совпадают с упомянутым Brain или это может быть вызвано какой-то другой проблемой.

Изменить: Из вашего ответа на theBrain, похоже, вы можете заставить метод 1 работать, если вы используете разные имена. Принимая это во внимание, вы также можете запретить публикацию на странице, изменив клик, чтобы включить возвращаемое ложное значение. Любое из следующего будет работать:

В сочетании с добавлением return false; в качестве последней строки кода вашей функции add() .

Что касается метода 2:

В любом случае, метод 2 является лучшим способом реализации этого, поэтому мы можем как-то игнорировать причины сбоя метода 1 (хотя наличие совершенно разных имен для функции и элемента button, безусловно, будет хорошей практикой; лично я предисловие все мои идентификаторы кнопок с «btn_»).

Вероятная причина сверхбыстрой очистки консоли в обоих методах заключается в том, что у вас нет type , объявленного для кнопки. В отсутствие типа разные браузеры работают по-разному (см. Совет на теге кнопки W3Schools), и кажется, что вы рассматриваете это как кнопку отправки, что означает, что при нажатии она отправляет сообщение обратно на страницу. Вы должны быть в состоянии предотвратить это, указав type=’button’ в атрибутах элемента кнопки.

Что касается метода 3:

Наконец, метод 3 обеспечивает такое поведение, потому что ваш оператор присваивания также выполняет вызов функции add() .

Источник

Особенности использования onclick в html

Приветствую вас, начинающие веб-разработчики и не только!

Рассмотрим атрибут HTML onclick и его особенности.

Навигация по статье:

onclick— представляет собой атрибут событий, при помощи которого можно задать скрипт срабатывающий при клике на элементе.

Событие onclick является базовым в HTML так как на нем завязано практически всё взаимодействие посетителя с сайтом. Поэтому оно активно применяется в скриптах для реализации определённых задач.

Для каких элементов можно использовать атрибут onclick в HTML?

Синтаксис написание этого атрибута выглядит так:

Давайте разберём что же означает набор этих странных символов.

В данном примере мы задаём атрибут onclick для кнопки button. Чтобы браузер понял что нам нужна именно кнопка мы указываем тип type=»button». Далее в этом атрибуте мы пишем javascript код.

В данном случае мы вызываем модальное окно и выводим в нём текст при помощи метода alert():

В скобках в кавычках указываем текст, который нужно вывести.

И последнее задаём текст, который будет написан на кнопке при помощи value=»Нажми на меня!»

А вот так будет выглядеть это чудо в действии:

Кроме кнопок атрибут onclick можно применять к ссылкам и к любым другим тегам HTML, НО там есть свои особенности, о которых поговорим ниже.

Особенности применения onclick для ссылки HTML

HTML код написания этого атрибута в теге ссылки выглядит так:

Как видите код немного отличается. Дело в том, что по правилам HTML для ссылок нам обязательно нужно указывать атрибут href, в котором нужно указать страницу для перехода. Проблема в том, что нам ведь не нужно чтобы при клике по ссылке осуществлялся переход, нам нужно чтобы срабатывал наш скрипт. Для этого внутри атрибута onclick мы дописываем return false;

Это позволяет нам добиться того чтобы браузер проигнорировал то что написано внутри атрибута href и никуда не переходил.

Вы наверное спросите: «А зачем тогда вообще оставлять атрибут href? Удалили его и все дела!»

В принципе такой вариант тоже возможен и он будет работать, НО с точки зрения валидности HTML кода это не есть хорошо, так как этот атрибут является основным и неотъемлемым для ссылки и удаляя его вы коварно лишаете ссылку важнейшей части её «тела». Валидаторы вам этого не простят!

Внутри атрибута href можно задать следующие значения:

• оставить его пустым href=»»
• поставить в нём решётку href=»#»
• написать href=»javascript://»
• указать реальную ссылку своего сайта href=» //impuls-web.ru/»

Мне больше нравится вариант с javascript:// и #.

Использование функций javascript в атрибуте HTML onclick

Когда к щелчку нужно привязать выполнение нескольких действий javascript лучше использовать функции, а потом вызывать их в атрибуте onclick.
Например, напишем скрипт, который позволит по щелчку на кнопку скрыть один блок и показать другой.

Источник

Введение в браузерные события

Событие – это сигнал от браузера о том, что что-то произошло. Все DOM-узлы подают такие сигналы (хотя события бывают и не только в DOM).

Вот список самых часто используемых DOM-событий, пока просто для ознакомления:

События мыши:

• click – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
• contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши.
• mouseover / mouseout – когда мышь наводится на / покидает элемент.
• mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе.
• mousemove – при движении мыши.

События на элементах управления:

• submit – пользователь отправил форму .
• focus – пользователь фокусируется на элементе, например нажимает на .

Клавиатурные события:

• keydown и keyup – когда пользователь нажимает / отпускает клавишу.

События документа:

• DOMContentLoaded – когда HTML загружен и обработан, DOM документа полностью построен и доступен.

CSS events:

• transitionend – когда CSS-анимация завершена.

Существует множество других событий. Мы подробно разберём их в последующих главах.

Обработчики событий

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

Именно благодаря обработчикам JavaScript-код может реагировать на действия пользователя.

Есть несколько способов назначить событию обработчик. Сейчас мы их рассмотрим, начиная с самого простого.

Использование атрибута HTML

Обработчик может быть назначен прямо в разметке, в атрибуте, который называется on .

Например, чтобы назначить обработчик события click на элементе input , можно использовать атрибут onclick , вот так:

При клике мышкой на кнопке выполнится код, указанный в атрибуте onclick .

Обратите внимание, для содержимого атрибута onclick используются одинарные кавычки, так как сам атрибут находится в двойных. Если мы забудем об этом и поставим двойные кавычки внутри атрибута, вот так: onclick=»alert(«Click!»)» , код не будет работать.

Атрибут HTML-тега – не самое удобное место для написания большого количества кода, поэтому лучше создать отдельную JavaScript-функцию и вызвать её там.

Следующий пример по клику запускает функцию countRabbits() :

Как мы помним, атрибут HTML-тега не чувствителен к регистру, поэтому ONCLICK будет работать так же, как onClick и onCLICK … Но, как правило, атрибуты пишут в нижнем регистре: onclick .

Использование свойства DOM-объекта

Можно назначать обработчик, используя свойство DOM-элемента on .

К примеру, elem.onclick :

Если обработчик задан через атрибут, то браузер читает HTML-разметку, создаёт новую функцию из содержимого атрибута и записывает в свойство.

Этот способ, по сути, аналогичен предыдущему.

Обработчик всегда хранится в свойстве DOM-объекта, а атрибут – лишь один из способов его инициализации.

Эти два примера кода работают одинаково:

Так как у элемента DOM может быть только одно свойство с именем onclick , то назначить более одного обработчика так нельзя.

В примере ниже назначение через JavaScript перезапишет обработчик из атрибута:

Кстати, обработчиком можно назначить и уже существующую функцию:

Убрать обработчик можно назначением elem.onclick = null .

Доступ к элементу через this

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

В коде ниже button выводит своё содержимое, используя this.innerHTML :

Частые ошибки

Если вы только начинаете работать с событиями, обратите внимание на следующие моменты.

Функция должна быть присвоена как sayThanks , а не sayThanks() .

Если добавить скобки, то sayThanks() – это уже вызов функции, результат которого (равный undefined , так как функция ничего не возвращает) будет присвоен onclick . Так что это не будет работать.

…А вот в разметке, в отличие от свойства, скобки нужны:

Это различие просто объяснить. При создании обработчика браузером из атрибута, он автоматически создаёт функцию с телом из значения атрибута: sayThanks() .

Так что разметка генерирует такое свойство:

Используйте именно функции, а не строки.

Назначение обработчика строкой elem.onclick = «alert(1)» также сработает. Это сделано из соображений совместимости, но делать так не рекомендуется.

Не используйте setAttribute для обработчиков.

Такой вызов работать не будет:

Регистр DOM-свойства имеет значение.

Используйте elem.onclick , а не elem.ONCLICK , потому что DOM-свойства чувствительны к регистру.

addEventListener

Фундаментальный недостаток описанных выше способов назначения обработчика –- невозможность повесить несколько обработчиков на одно событие.

Например, одна часть кода хочет при клике на кнопку делать её подсвеченной, а другая – выдавать сообщение.

Мы хотим назначить два обработчика для этого. Но новое DOM-свойство перезапишет предыдущее:

Разработчики стандартов достаточно давно это поняли и предложили альтернативный способ назначения обработчиков при помощи специальных методов addEventListener и removeEventListener . Они свободны от указанного недостатка.

Синтаксис добавления обработчика:

Для удаления обработчика следует использовать removeEventListener :

Для удаления нужно передать именно ту функцию-обработчик которая была назначена.

Вот так не сработает:

Обработчик не будет удалён, т.к. в removeEventListener передана не та же функция, а другая, с одинаковым кодом, но это не важно.

Вот так правильно:

Обратим внимание – если функцию обработчик не сохранить где-либо, мы не сможем её удалить. Нет метода, который позволяет получить из элемента обработчики событий, назначенные через addEventListener .

Метод addEventListener позволяет добавлять несколько обработчиков на одно событие одного элемента, например:

Как видно из примера выше, можно одновременно назначать обработчики и через DOM-свойство и через addEventListener . Однако, во избежание путаницы, рекомендуется выбрать один способ.

Существуют события, которые нельзя назначить через DOM-свойство, но можно через addEventListener .

Например, таково событие DOMContentLoaded , которое срабатывает, когда завершена загрузка и построение DOM документа.

Так что addEventListener более универсален. Хотя заметим, что таких событий меньшинство, это скорее исключение, чем правило.

Объект события

Чтобы хорошо обработать событие, могут понадобиться детали того, что произошло. Не просто «клик» или «нажатие клавиши», а также – какие координаты указателя мыши, какая клавиша нажата и так далее.

Когда происходит событие, браузер создаёт объект события, записывает в него детали и передаёт его в качестве аргумента функции-обработчику.

Пример ниже демонстрирует получение координат мыши из объекта события:

Некоторые свойства объекта event :

event.type Тип события, в данном случае «click» . event.currentTarget Элемент, на котором сработал обработчик. Значение – обычно такое же, как и у this , но если обработчик является функцией-стрелкой или при помощи bind привязан другой объект в качестве this , то мы можем получить элемент из event.currentTarget . event.clientX / event.clientY Координаты курсора в момент клика относительно окна, для событий мыши.

Есть также и ряд других свойств, в зависимости от типа событий, которые мы разберём в дальнейших главах.

При назначении обработчика в HTML, тоже можно использовать объект event , вот так:

Это возможно потому, что когда браузер из атрибута создаёт функцию-обработчик, то она выглядит так: function(event) < alert(event.type) >. То есть, её первый аргумент называется «event» , а тело взято из атрибута.

Объект-обработчик: handleEvent

Мы можем назначить обработчиком не только функцию, но и объект при помощи addEventListener . В этом случае, когда происходит событие, вызывается метод объекта handleEvent .

Как видим, если addEventListener получает объект в качестве обработчика, он вызывает object.handleEvent(event) , когда происходит событие.

Мы также можем использовать класс для этого:

Здесь один и тот же объект обрабатывает оба события. Обратите внимание, мы должны явно назначить оба обработчика через addEventListener . Тогда объект menu будет получать события mousedown и mouseup , но не другие (не назначенные) типы событий.

Метод handleEvent не обязательно должен выполнять всю работу сам. Он может вызывать другие методы, которые заточены под обработку конкретных типов событий, вот так:

Теперь обработка событий разделена по методам, что упрощает поддержку кода.

Итого

Есть три способа назначения обработчиков событий:

1. Атрибут HTML: onclick=». » .
2. DOM-свойство: elem.onclick = function .
3. Специальные методы: elem.addEventListener(event, handler[, phase]) для добавления, removeEventListener для удаления.

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

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

Последний способ самый гибкий, однако нужно писать больше всего кода. Есть несколько типов событий, которые работают только через него, к примеру transitionend и DOMContentLoaded . Также addEventListener поддерживает объекты в качестве обработчиков событий. В этом случае вызывается метод объекта handleEvent .

Не важно, как вы назначаете обработчик – он получает объект события первым аргументом. Этот объект содержит подробности о том, что произошло.

Мы изучим больше о событиях и их типах в следующих главах.

Источник