Кнопка
Рассмотрим пример, как нужно обрабатывать нажатия кнопки в форме с помощью JavaScript.
Создадим простейшую форму.
На данный момент кнопка ничего не делает. Получим доступ к кнопке.
Далее следует создать код, который будет выполняться при нажатии кнопки.
Осталось подключить созданную функцию к переменной
При нажатии на кнопку появляется сообщение.
Идём дальше. Мы хотим получить текст, введённый пользователем в текстовом поле. Когда пользователь вводит текст, то у элемента input type=»text» в свойстве value появляется значение, которое и содержит текст пользователя. Таким образом, нам нужно сначала получить доступ к элементу страницы по идентификатору, а затем его свойство.
Теперь выводится сообщение, в котором содержится имя кота. Не помешает небольшая проверка, что текст был введён.
Третий шаг — выводить имена котов на самой странице. Мы уже приготовили список ul, к которому тоже можно получить доступ и добавлять дочерние элементы. Для получения доступа используем знакомый метод getElementById(). Для динамического создания нового элемента используется метод document.createElement(). После создания мы можем настроить элемент, например, прописав текст. Для текста элемента списка будем использовать переменную, которая содержит имя кота. Создав новый элемент, его необходимо добавить к родительскому элементу через appendChild().
Новые способы
В последнее время стали использовать другой код. Например, используют const вместо var, вместо onclick — addEventListener.
Также вместо getElementById() можно использовать querySelector(). А в addEventListener использовать другой формат вызова функции.
Кнопка с анимированным текстом
Описание: Кнопка с динамически появляющимся текстом. При нажатии на кнопку пользователь переходит на заданный в скрипте файл. Не совсем тривиальный скрипт JavaScript, но весьма захватывающее внимание. Вы можете создать его на своём сайте, и внимание к этому JavaScript у посетителей Вам обеспечено.
Результат работы:
Код JavaScript (вставлять между тегами <head> и </head>):
<script language=»javascript»>
var timerID = 0;
var timerRunning = false;
var charNo = 0;
var charMax = 0;
var textLine = «Michael Rusakov — Personal Web Site»; //Текст на кнопке
var urlLine = «http://www.myrusakov.ru»; //Адрес перехода после нажатия
function startShow() <
stopShow();
showLine();
timerRunning = true;
>
function stopShow() <
if (timerRunning) <
clearTimeout(timerID);
timerRunning = false;
>
>
function showLine() <
charMax = textLine.length;
if (charNo <= charMax) <
document.animationbutton.but.value = textLine.substring(0, charNo);
document.animationbutton.but.style.color = «red»;
charNo++;
timerID = setTimeout(«showLine()», 100);
>
else <
charNo = 0;
timerID = setTimeout(«showLine()», 3000);
>
>
function gotoURL() <
location.href = urlLine;
>
</script>
Код HTML (вставлять между тегами <body onload = «startShow()»> и </body>):
<form name = «animationbutton»>
<input type = «button» name = «but» onClick = «gotoURL()»>
</form>
C уважением, Михаил Русаков и сайт http://myrusakov.ru.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 18 ):
Классный скрипт. Хотел повесить такую кнопку на отправку формы и выявил одну особенность. Почему-то в Opera нельзя изменять значения ‘value’ у кнопки типа ‘submit’. Чтобы заработал скрипт, пришлось поставить кнопке тип ‘button’ и присвоить атрибут: onclick = ‘document.form.submit()’
Здравствуйте Михаил. Подскажите пожалуйста, как сделать такую кнопку,как у Вас на странице?(синенькая)
Это анимированное GIF-изображение. Её можно сделать в Photoshop.
Здравствуйте Михаил.Кнопка-изображение-это понятно. А как правильно написать ссылку для этой кнопки,для размещения ее на другом сайте?
Курсы javascript
Здравствуйте ! На одном из сайтов, видел следующие:
При нажатии на кнопку, будет выводиться текст, если рядом с текстом нажать отменить, то все вернется.
http://upanel.biz/img/?7354
http://upanel.biz/img/?7353
Совсем не знаю javascript, помоги, очень прошу !
Вот пример как можно тупо скопировать код чтоб он работал, но так не советую делать (я это сделал потому, что время нет). Тем более если новичок, нужно вникнуть и разобраться как все работает.
Доброго времени суток!
Столкнулся с такой проблемой, необходим скрипт на php.
Что требуется:
Есть кнопка на странице demo.html
когда зашел пользователь на эту страницу и нажал на кнопку, у него должен появиться текст "вы нажали на эту кнопку"
Но если зашел еще один пользователь и нажал на эту же кнопку, у первого пользователя должен смениться этот текст с "вы нажали на эту кнопку" на "кнопка нажата другим пользователем" соответственно у 2-го кто нажал на эту кнопку, должен появиться текст "вы нажали на эту кнопку"
Прошу помощи! перерыл весь рунет, пытался многие переделать, не чего не выходит. Спасибо.
Как сделать появление текста без javascript?
Как сделать так, чтобы при нажатии на кнопку появлялся текст, используя visibility?
Первоначально у текста visibility hidden;
- Вопрос задан более трёх лет назад
- 594 просмотра
- Вконтакте
- Вконтакте
Ivan Ivanovich, либо хаком на checkbox, либо JS.
Учтите, что хак на checkbox’ах приведёт к тому, что нажатие на текст будет скрывать текст тоже, ибо они будут все в одном label.