Jquery onclick добавить событие: javascript — jQuery — как добавить атрибут onclick

Как изменить текстовое событие OnClick JavaScript

JavaScript является основой каждого веб-сайта. Он помогает управлять пользовательскими событиями, а также обрабатывает операции браузера.

Иногда нам нужно динамически изменить текст элемента с помощью пользовательского события, такого как событие OnClick или OnHover . В это время JavaScript и JQuery вступают в роль для обработки события.

Здесь мы увидим, как мы можем изменить текст элемента, используя функцию JavaScript, на различных примерах.

JavaScript использует свойство innerHTML для изменения текста элемента.

Синтаксис

 document.getElementById(‘id_name’).innerHTML = «new_text»; 

Объяснение

• Здесь id_name — это идентификатор тега HTML, который вы хотите выбрать.
• innerHTML используется для изменения текста внутри выбранного тега HTML с помощью метода document. getElementById() .
• new_text — это текст, который мы хотим вставить.

Предположим, у нас есть один образец абзаца. Мы хотим изменить текст этого абзаца, когда нажимаем кнопку.
Давайте посмотрим, как это можно сделать.

 

<тело>
При нажатии кнопки текст образца абзаца изменится.
Я образец абзаца.
Нажмите на меня
<скрипт>
функция change_text () {
    document.getElementById("demo").innerHTML = "Вы нажали кнопку, я новый абзац.";
}


 

Выход

Перед нажатием кнопки:

После нажатия кнопки:

Объяснение

• Сначала мы создаем функцию reame_text () .
• Затем мы добавляем внутреннюю функцию document.getElementById(«demo»).innerHTML и добавляем текст, который мы хотим показать.
• Затем мы создаем тег

  и кнопку.

• Наконец, когда мы нажмем кнопку, текст тега
  изменится.

Предположим, мы хотим создать форму, которая использует имя в качестве поля ввода и будет отображать приветственное сообщение внутри тега

. Давайте посмотрим, как это может быть выполнено.

 

<тело>
Нажмите кнопку, чтобы отобразить приветствие.

Имя:


<тип ввода="текст" имя="имя">



Отправить
<скрипт>
функция change_text () {
    var name = document.getElementById("name").value;
    document.getElementById("демо").innerHTML = "Привет" + имя;
}


 

Вывод

До нажатия кнопки:

После нажатия кнопки:

Объяснение

• Создаем функцию change.
• Затем мы получаем значение внутренней функции document.getElementById(«name»).innerHTML и
  присваиваем его переменной имени.
• Затем, после того как мы присвоим значение переменной name внутри тега

  , используя document.getElementById(«demo»).innerHTML.

• Наконец, когда мы нажимаем кнопку, внутри тега

  отображается текст приветствия.

Читайте также: Как получить параметры URL с помощью JavaScript

Заключение

Это все о том, как изменить текст с помощью JavaScript. Я уверен, что вы не имеете представления о добавлении текста с помощью JavaScript.

Надеюсь, этот пост был для вас информативным.

Спасибо за прочтение 🙂

Автор статьи: Начикет Панчал

методы jQuery: click()

Райан Манчестер — 04 декабря 2020 г.

Какие действия мы чаще всего предпринимаем при посещении веб-сайта? Щелчок мышью! Нажатие — одно из самых важных действий на веб-сайте или в приложении. Вы делаете это при навигации по веб-сайту и добавлении товаров в корзину.

Было бы здорово, если бы мы могли определить, когда пользователь нажимает на определенный элемент на странице? Затем мы могли бы построить опыт вокруг этого поведения.

Введите jQuery щелчок() метод. Мы можем инициировать событие, когда пользователь щелкает мышью, всего за пару строк кода. Этот метод вызывается в селекторе jQuery и принимает функцию обратного вызова в качестве аргумента. Функция обратного вызова будет выполняться каждый раз, когда щелчок() метод обнаруживает событие щелчка мыши.

Найдите свой матч для буткемпа

• Career Karma подберет для вас лучшие учебные курсы по технологиям
• Получите доступ к эксклюзивным стипендиям и подготовительным курсам

Выберите свой интерес
Программная инженерия Дизайн Наука о данных Аналитика данных Кибер-безопасности Имя

Фамилия

Продолжая, вы соглашаетесь с нашими Условия использования и Политика конфиденциальности , и вы соглашаетесь получать предложения и возможности от Career Karma по телефону, текстовым сообщениям и электронной почте.

Использование jQuery клик()

Мы собираемся отобразить HTML-кнопку и добавить текст на страницу при нажатии кнопки в примере ниже. щелчок() Метод можно прикрепить к любому элементу на странице, но чаще всего его прикрепляют к кнопке:

  <дел>
  <кнопка>
  Нажми на меня!

 

  
  
 

Приведенный выше код отображает базовую кнопку с идентификатором «btn-primary» внутри

 <скрипт>
  $('#btn-primary').click(() =>
 
  {
    $('.new-content').append("Кнопка нажата!")
  })