Как задать id элементу js

Add ID to Element Using JavaScript

The id attribute plays a vital role in JavaScript, which relates to a certain element suitable with the getElementById() function. The id must be unique in the HTML page because they help get the HTML element’s values and content later.

With the importance of the id attribute, this tutorial teaches how to add the id attribute to a pre-existing or new HTML element using JavaScript.

Use setAttribute() Function to Add id to an Element in JavaScript

For pre-existing and new HTML elements, setAttribute() function and .id property is used. The setAttribute() takes two parameters.

The first is the attribute name, and the second is the attribute’s value. For instance, the first parameter would be id , and the second can be any string to add the id attribute to that particular element.

On the other hand, we can directly assign the id attribute’s value to the .id property. We will use the following HTML startup code to add an id to a pre-existing and new element.

Add id to Pre-Existing Element Using JavaScript

We used two ways in the above code to add the id attribute. First is setAttribute() method and the second is .id property.

Firstly, we get the element whose id’s value is firstParagraph , use the setAttribute() function to set a new value of the id attribute, and print on the console to confirm that it is changed.

Now, the id is changed from firstParagraph to firstPracPara . Let’s change it again by using the .id property.

The latest value of id is newPracPara ; printed it also on the console to confirm. You can see the above output.

How to add an ID to element in JavaScript

Get Educative’s definitive System Design Interview Handbook for free.

IDs are essential in JavaScript. They refer to a particular element compatible with the getElementById( ) method, which returns it with the given property.

IDs should be unique within a page, and all elements within a page should have an ID even though it is not necessary.

You can add an ID to a new JavaScript Element or a pre-existing HTML Element.

Name already in use

javascript-lectures / 10-dom.md

• Go to file T
• Go to line L
• Copy path
• Copy permalink

• Open with Desktop
• View raw
• Copy raw contents Copy raw contents

Copy raw contents

Copy raw contents

Когда-то давным давно, когда js был совсем молод и еще ходили Netscape-динозавры, то все думали, что мощь-js заканчивается следующими сценариями:

1. создание мигающих ссылок;
2. скрытие/расскрытие элементов;
3. .

Метеориты падали и падали, многие динозавры вымерли, и JS начал изменяться под потребности работадателей и других ‘зверей’:

1. Исполнения кода не только в браузере;
2. Запуск js на сервере;
3. Firefox Os;
4. Phonegap;
5. .

Но все ‘мутации’, которым подвергся js, не изменили его главную цель, а именно, создание динамических страниц в браузере. Конечно со времен динозавров много воды утекло и потребности изменились:

1. Календари;
2. Частичное заполнение форм;
3. Саггесты(подсказки при вводе);
4. Динамическая отрисовка страниц;
5. И многое другое.

В этой лекции мы поговорим о том, что делает фронтенд разработчика — фронтенд разработчиком.

P.S. Все примеры, который написаны в данной главе работают в относительно современных браузерах. Так как лекции готовятся с расчетом на смерть ie10 <=

Запуск кода в браузере

Запустить js в браузере можно множеством способов:

1. Через консоль разработки
2. Через сервисы-песочницы
3. Через html документ

Давай-те рассмотрим каждый из вариантов:

Запуск кода через консоль

1. Запускаем Яндекс.Браузер
2. Идем в Settings
3. Идем в Advanced
4. Идем в More Tools
5. Идем в Developer Tools
6. Затем идем в таб Console
7. Пишем в строке код 2+2
8. Жмем enter // 4

P.S. Для запуска Developer Tools есть хоткей

Запуск кода через песочницу

1. идем на сайт jsfiddle.net
2. во вкладке js пишем: console.log(2+2)
3. жмем кнопку run
4. идем в Developer tools

Запуск кода через html документ

1. Создадим простую html-страницу

1. Вставляем тэг-script

1. Открываем ваш документ в браузере
2. открываем Developer Tools

Что такое DOM для разработчика

DOM — это API, которое предоставляет браузер js-интерпретатору для взаимодействия с html-документов:

1. чтение данных из документа;
2. изменение документа;
3. реакция на действия пользователя;

Очень важно понимать, что DOM — это API, которое удоволетворяет стандарту, то есть каждый браузер старается реализовать стандарт, но бывает возникают некоторые ‘проблемы’.

Стандарт можно почитать здесь: http://www.w3.org/DOM/

Что такое DOM для интерпретатора

DOM — это Document Object Model, то есть браузер предоставляет интерпретатору не html страницу ввиде строки, а некоторый object, который связан с документом, отображаемым в браузере. То есть при изменении модели меняется документ, а при изменении документа меняется модель.

Грубо говоря модель — это граф, который состоит из узлов(Node).

Node — это, объект со следующими полями:

1. тип узла;
2. набор атрибутов;
3. ссылка на левого/правого соседа;
4. ссылка на родительский узел;
5. ссылка на массив ‘детей’;

Каждый узел имеет тип. Типов очень много, но не все из них одинакого полезные, поэтому укажу только важные:

1. ELEMENT_NODE=1 — элемент;
2. TEXT_NODE=3 — текст;
3. COMMENT_NODE=8 — комментарий
4. DOCUMENT_NODE=9 — документ(ссылка на тэг-html)
5. DOCUMENT_TYPE_NODE=10 — DOCTYPE
6. DOCUMENT_FRAGMENT_NODE=11 — фрагмент

Из списка типов элементов можно понять следующее:

1. DOM сохраняет информацию о тексте;
2. DOM сохраняет информацию о комментарии;
3. DOM содержит особый элемент DOCUMENT_NODE, то есть на корень графа;

Пока оставим за сценой, что такое DOCUMENT_FRAGMENT_NODE, но в конце лекции мы вернемся к нему.

DOCUMENT_NODE — в документе ровно один. Для получение ссылки на DOCUMENT_NODE нужно обратиться к переменную document.

Давай-те вернемся к нашему основному примеру:

Сколько узлов будет в DOM?

1. 6 — элементарных узлов;
2. 1 — элемент текста;

Но не все так просто мы забыли посчитать пробельные символы между элементами:

1. 6 — элементарных узлов;
2. 9 — текстовых узлов;

То есть соседний элемент у ‘Фамилия’ — не ‘Имя’, а некоторый текстовый элемент. Поэтому многие разработчики ‘минифицируют’ свой html перед отправкой его клиенту, удаляя все лишние пробелы и переводы строк.

Как искать что-то по DOM

Прежде чем перейти к чему-то сложному, нужно научиться находить какие-то узлы.

Поставим для себя следующие задачи:

1. Найти форму
2. Найти текстовые поля

Давай-те разметим наш документ id-ми:

Для поиска по id нужно воспользоваться методом getElementById, который есть только у document.

1. Подходит для поиска уникальных элементов;
2. Очень быстрый;
3. Поведение не гарантированно при наличии дупликатов;

Возьмем наш html.

Для поиска по тэгу необходимо воспользоваться методом getElementsByTagName.

Метод возвращает не массив элементов, а некоторый array-like объект NodeList. NodeList — это живая-коллекция, то есть она меняется при изменении DOM

Из-за своей особенности(живучести), NodeList очень сильно не любят => от него очень часто избавляются по средством превращения array-like объекта в массив:

Но если вы готовы:

1. Помнить, что коллекция может неожиданно измениться
2. Кэш коллекции сбрасывается при изменении DOM
3. Вы не сможете пользоваться методами массива

Метод getElementsByTagName есть не только у document, но и у всех других элементов, если вы вызываете этот метод не у document, то метод ищет в контексте элемента.

1. вы можете найти все тэги за один запрос;
2. можно искать в контексте определенного элемента;
3. редко нужно искать по тэгам, так как такой код сложно поддерживать

Поиск по классу

Возьмем наш html и добавим все элементам классы.

Для поиска элементов по классам можно воспользоваться методом getElementsByClassName, который есть так же у всех узлов.

1. Можно искать сразу много элементов удоволетворяющих одному css селектору;
2. Можно гибко размечать нужные элементы;
3. Метод не такой быстрый, как getElementById, но не критично.

Поиск элемента по css-селектору:

Для поиска по DOM интерпретатор предоставляет два очень удобных метода:

1. querySelector — поиск первого элемента по css-селектору
2. querySelectorAll — поиск всех элементов удоволетворяющих css-селектору

1. метод очень удобный
2. метод помедленне всех остальных, но не критично

Мы рекомендуем вам пользоваться им.

Как искать что-то рядом

Поиск родительского элемента

Для поиска родительского элемента нужно воспользоваться свойствами:

1. parentNode
2. parentElement

parentNode — ищет родительский Node узел произвольного типа, а parentElement ищет родительский узел типа отличного от комментарий, текст или DOCTYPE.

Лучше использовать всегда parentElement, или обфуцировать свой html и использовать parentNode.

Поиск определенного родительского элемента

Метод closest, который есть у всех элементов, позволяет найти ближайшего родителя или самого себя, удоволетворяющего css-селектору.

Если нет отца/самого_себя удоволетворяющего условию, то вернется null

Для поиска соседей существует 4ре свойства:

1. nextSibling
2. nextElementSibling
3. previousSibling
4. previousElementSibling

next — ищет правого соседа, а previous — левого.

Для поиска детей есть следующие свойства:

1. firstChild — возвращает ссылку на первого ребенка
2. firstElementChild
3. lastChild — возвращает ссылку на последнего ребенка
4. lastElementChild
5. childNodes — возвращает live-array со списком детей
6. children

Метод, который есть у всех элементов, проверяет что dom-element подходит под css-селектор.

Работа с атрибутами

атрибуты нужны для двух вещей:

1. для настройки нативной работы некоторых html элементов(таких как ссылки)
2. для передачи данных на клиент и работы с ними

Чтение из атрибутов

Для чтения из атрибутов нужно воспользоваться методом getAttribute()

Для чтения из атрибутов нужно воспользоваться методом setAttribute()

Для удаления атрибутов

Для чтения из атрибутов нужно воспользоваться методом removeAttribute()

свойства vs атрибуты

Многие атрибуты отражены в свойствах Node, например:

1. Не у всех атрибутов совпадает имя со свойством. Например, class и className
2. значение, находящиеся в атрибуте, может не совпадать со свойством
3. при изменении атрибута/свойства синхронизация не всегда гарантирована

важные cвойства и атрибуты

1. id — Идентификатор объекта, который используется для поиска уникальных элементов.
2. className — В js ‘class’ зарезервированное имя, поэтому разработчики стандарта решили использовать имя className

style — Это свойство используется для задания стилей конкретным элементам. Обычно используется для динамического изменения: width, height, left, right. Если у вас есть какой-то конечный(разумный) набор состояний у html элемента, то лучше менять класс, а style использовать только в крайнем случаи. 4. и другие

Веб-стандарты выделелили под бизнес-лапшу namespace атрибутов. Все атрибуты с префиксом ‘data-‘ считаются пользовательскими => веб-стандарты никогда не выпустят атрибут, который начинается с ‘data-‘ => их можно безопасно использовать для своих нужд.

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

Если бы пользовательские атрибуты в словаре dataset именовались так же как в html-разметке, то тогда ими было бы не удобно пользоваться:

Поэтому разработчики стандарта решили нам упростить жизнь, и создали отображение html-атрибутов в js-свойства и обратно.

Отображение html-атрибута в js-свойство:

1. Берем имя атрибута
2. Откусываем префикс ‘data-‘
3. Преобразовываем к верхнему регистру символы следующие за ‘-‘
4. Удаляем символы ‘-‘

Отображение js-свойства в html

1. Берем имя свойства
2. Ищем все символы в верхнем регистре (*с 1ой позиции)
3. Вставляем перед ним ‘-‘
4. Опускаем строку в нижний регистр и прибавляем префикс ‘data-

Между data-атрибутами и dataset существует ‘связь’, то есть при изменении атрибута меняется свойство, а при изменении свойства изменяется атрибут.

При разработке интерфейсов многие компоненты имеют визуальные состояния:

1. Модальное окно открыто/закрыто
2. Элемент когда-то нажимали или нет
3. Любимый трэк пользователя или нет

Для изменение визуального состояния страницы можно поступать следующими способами:

1. Отправить на другую страницу с измененным отображением(старая школа)
2. Удалить часть элементов из html
3. Изменить style у нужных элементов
4. Изменить class

Способы 1-3 хороши, но давай-те поговорим о 4.

class — это тоже атрибут, для его изменения вы можете изменить этот атрибут:

Тут нужно обратить внимание, что при изменении class через атрибут вы работаете со строкой => вам все операции по работе с классами нужно писать самим:

1. удаление класса
2. замена класса
3. добавление класса

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

Так же менять класс можно через свойство className

Тут такая же ситуация, как и с setAttribute.

Работа со свойством classList

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

Шли годы и разработчики стандарта решили уделить время созданию более удобному интерфейсу для работы с классами, так как пользовательский сценарий по изменению класса довольно частый.

classList — это свойство, которое есть у всех dom-element.

Для добавления нового класса у элемента нужно воспользоваться методом add:

Для удаления класса из элемента нужно воспользоваться методом remove:

Для замены класса из элемента нужно воспользоваться методом toggle:

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

Когда-то давным давно чтобы изменить страницу нужно было перейти по url с измененной страницей.

Но темные времена прошли и веб стал очень динамичным. При работе с сайтом dom частенько меняется:

1. открытие модальных окон
2. создание таблиц
3. бесконечные ленты
4. обновление страниц без перезагрузки данных

Поэтому очень важно уметь менять dom.

Создание новых dom-элементов.

У объекта страницы есть метод createElement, который принимает название tag нового элемента и создает новый element с вашим тэгом.

Когда вы создаете новый элемент, то он создается в «вакууме» и нигде не отображается. Чтобы он стал виден на странице его нужно добавить к одному из элементу, который уже отображен на странице.

Для создание текста нужно воспользоваться методом createTextNode

Мало создать элемент, но нужно его еще добавить к существующему dom, иначе от него мало толку.

Для этого существует несколько способоов.

Находим какой-то элемент и добавляем справа к его детям новый элемент.

Находим элемент и вставляем перед ним.

Способ третий — заменить существующий элемент

Находим старый элемент, заменяем на новый

Все способы до этого кажутся очень кропотливыми и если нам предстоит задача по json нарисовать страничку на клиенте, то такая задача кажется непосильной. Поэтому есть свойство innerHTML, которое позволяет создавать новые элементы проще.

Это свойство позволяет получить html детей в виде строки.

Так же в свойство innerHTML можно присваивать новый html:

Но innerHTML опасное свойство, так как это свойство не экранирует html, что очень даже логично, но это является уязвимостью. Например, XSS.

DOM элементы содержат в себе некоторый аналог innerHTML, а именно, innerText.

innerText — это свойство, которое позволяет заменить все содержимое элемента на заэкранированный текст, то есть если вы вставить некий html-код, то вы на странице увидете код, а не html-элементы.

Все предыдущие способы по генерации нового html содержимого кажутся ‘неприятными’. И я с вами полностью согласен. Поэтому умные js разработчики написали кучу шаблонизаторов, которые позволяют создавать html ввиде строки значительно приятнее, а затем вы можете вставить этот html 5 способом.

Маленькое домашнее задание придумать свой шаблонизатор! Больше шаблонизаторов!

Для удаления html элементов надо воспользоваться функцией removeChild

Добавление нескольких элементов

Бывает, нам нужно добавить не одного ребенка, а сразу N

Берем метод appendChild и цикл for

Но важно помнить, что каждый раз когда вы изменяете dom у вас запускаются внутренние механихмы браузера по обновлению страницы. Следовательно, есть правило хорошего тона: ‘Трогать дом можно, но чуть-чуть’;

Создаем какой-то dom-элемент, вставляем в него новые элементы и, вставляем в dom.

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

Для решение этой проблемы есть специальный тип Node — DOCUMENT_FRAGMENT.

DocumentFragment — растворяется в DOM при присоединении его к отображаемым элементамю.

Для создание DocumentFragment нам нужно воспользоваться методом createDocumentFragment у document

Когда-то давным давно люди думали, что html-страницы нужны только для публикации научных статей, но время шло и людям захотелось не только смотреть на текст + картинки, но и как-то взаимодействовать со страницей. Для этого браузер оснастили механизмом событий, а именно, способностью сообщать клиентскому коду, что на странице что-то произошло. Например:

1. пользователь тыкнул на кнопку
2. страница загрузилась
3. пользователь начал скролить и так далее.

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

Как подписаться на событие

Как обычно в js существует несколько способов

Подписать на событие можно с помощью html-атрибута. Для всех основных событий имя атрибута: on + имя событие(onclick, onblur, . ) .Обработчик события записываем в виде строки в разметку или записываем имя глобальной функции

1. Можно добавить только один обработчик;
2. Смешиваем отображение с реализацией;
3. Глобальные функции;
4. Самый простой вариант;

В js у всех dom-element есть свойства on + имя событие. Чтобы подписаться на событие через js нужно присвоить функцию обработчик в атрибут.

Чтобы отписаться от события нужно присвоить в атрибут null.

1. Можно добавить только один обработчик;
2. Самый простой вариант;

Разработчики веб стандарта предлагают пользоваться методом addEventListener, который есть у всех dom-element. Метод принимает три аргумента:

1. eventName имя событие
2. listener — ваш обработчик
3. useCapture — стадия активации обработчика, о которой мы поговорим позже.

Обработчик событий принимает объект event, который в себе содержит всю информацию о произошедшем событии.

1. target — на каком элементе сработало событие
2. currentTarget — на каком элементе в данный момент обрабатывается событие
3. type — название события
4. и другие свойства, которые специфичны для различных событий

Отписка от событий

У метода addEventListener есть напарник removeEventListener(), который имеет такую же сигнатуру.

Важно обратить внимание, что при отписке от события нужно передать туже функцию.

Следующий код не будет работать:

Зачем может понадобиться отписываться:

1. при изменении состояния приложения(например, контрол заблокирован)

Механизм работы обработки событий

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

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

1. Кто-то создал событие (например, тыкнул мышкой по кнопке)
2. Берем спискок родителей
3. Начинаем стадию захвата
4. Бежим в цикле по родителям начиная с самого дальнего
5. • Вызываем обработчики, которые подписаны на стадию захвата
6. Начинаем стадию цели
7. Вызываем все обработчики, которые подписаны не важно на какую стадию
8. Начинаем стадию всплытия
9. Бежим в цикле по родителям начиная с самого ближнего
10. • Вызываем обработчики, которые подписаны на стадию всплытия

Что мы узнали из механизма:

1. addEventListener — последним параметром принимает стадию захвата/всплытие
2. Список элементов на которых будут вызваны обработчики фиксируется при возникновении события
3. Событие на стадии захвата происходят чуть быстрее(но по историческим причинам все используют стадию всплытия)
4. На цели обработчики вызываются в произвольном порядке.

10 — пунктов в алгоритме очень тяжело поэтому давайте рассмотрим пример

Пример с квадратами:

Так давай-те тыкнем по ‘красному квадрату’:

1. target=red
2. parents = [html, body, container]
3. Вызываем обработчики захвата на html -> body -> container
4. Вызываем обработчики цели на red
5. Вызываем обработчики стадии всплытия container -> body -> html

Затем давай-те тыкнем по ‘синему квадрату’:

1. target=blue
2. parents = [html, body, container, red]
3. Вызываем обработчики захвата на html -> body -> container->red
4. Вызываем все обработчики на blue
5. Вызываем обработчики стадии всплытия red -> container -> body -> html

Затем давай-те тыкнем по ‘зеленому квадрату’:

1. target=green
2. parents = [html, body, container, red, blue]
3. Вызываем обработчики захвата на html -> body -> container->red-> blue
4. Вызываем все обработчики на blue
5. Вызываем обработчики стадии всплытия blue -> red -> container -> body -> html

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

1. Найти родителя;
2. подписаться на нужное событие в родителе на стадию всплытия;
3. в обработчике отсеять не нужные элементы;

Как будем отсеивать. Все обработчики события вызывают с параметром event. Параметр event — это объект в котором есть куча полезных вещей:

1. currentTarget — dom-elem на котором вызван обработчик (совпадает с this)
2. target — элемент, по которому реально тыкнули
3. и другие полезные параметры

Тогда делегирование событий может быть реализованно как-то так:

Но возникаем проблема, когда в элементе с которого мы хотим делигировать событие есть вложенные элементы

Проблема в том, что target будет указывать на кликнутый элемент, то есть на самый вложенные, в нашем случае span. Чтобы эту проблему решить нужно маленько ‘прокачать’ наш обработчик:

1. взяли элемент по которому тыкнули (event.target)
2. нашли от него ближайший родитель/самого себя, нашей реальной цели
3. если реальная цель не нашлась, то беда и тыкнули по чему-то другому
4. иначе мы нашли что надо.

Ясное дело, что постоянно писать такие обработчики накладно, поэтому рекондую вам написать функцию delegate, которая принимает:

parentTarget — элемент на который делегируют ответственность за обработку событий

selector — селектор детей с которых делегируется ответственность

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

Не нужно отписываться от событий при удалении элементов.

Один обработчик вместо N.

Обработчик становится чуть сложнее.

Обработчик будет срабатывать, когда мог бы не срабатывать.

Я рекомендую иметь на вооружении этот инструмент, так как он помогает избавиться от кучи проблем.

Так же вам может показаться, что было бы не плохо повешать delegate на body, чтобы иметь минимальное количество обработчиков или вообще один. Но при таком подходе обработчик будет срабатывать очень часто и это может повлиять на производитьльность. Но такой подход используют некоторые framework.

Бывает в одном из обработчиков мы понимаем, что мы все обработали и вызов дальнейших обработчиков не нужен. Тогда нам на помощь приходитм метод stopPropagation, который есть у объекта event.

. stopPropagation полность останавливает обработку события.

Некоторые html-элементы имеют некоторое действие по умолчанию, при возникновении определенных событий. Например, ссылка при клике осуществляет переход по ссылке.

Javascript доступ к элементам html

В этом уроке разберём, как средствами javascript воздействовать на элементы html.

Допустим у нас на странице имеется заголовок h2.

Задача: средствами javascrip воздействовать на этот заголовок. То есть задать ему цвет, изменить текст, заставить двигаться и т.д., и т.п.

Но для того чтобы воплотить эти намерения в жизнь, необходимо получить доступ javascrip к этому элементу html.

Для получения доступа есть несколько способов. Рассмотрим их по порядку.

Доступ по имени тега

Создаётся доступ с помощью уже известного нам объекта document с методом getElementsByTagName , где

Elements — элементы (множественное число потому, что по умолчанию предполагается несколько тегов на странице. Ниже разберём подробнее)

Вот было-бы программирование на русском, да?

Ну, как есть так уж есть, поэтому на латинице прописываем следующий скрипт в тег body под нашим заголовком. Почему именно в body, узнаем в дальнейшем, пока не так важно.

Но это ещё не всё. Так как тегов на html странице обычно бывает много, то javascript воспринимает обращение к ним, как обращение к массиву.

Из предыдущей статьи вы знаете как обращаться к массиву.

В квадратных скобках надо указать номер элемента в массиве.

Но и это ещё не всё. Помимо имени тега надо указать что это тег html. Для этого существует метод innerHTML

Вот теперь всё. Доступ для работы с заголовком получен. Как это проверить?

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

Я ещё добавил перенос строки, так как дальше будут ещё подключения.

В общем у меня работает

Доступ по id элемента

Для этого добавим на страницу элемент и зададим ему id.

Используем тот же объект document с другим методом getElementById где

Element — элемент (уже в единственном числе, так как id обычно бывает уникальным)

Добавим строку в скрипт, сразу с выводом на экран для проверки.

Посмотрим, что получилось

Видно, что доступ к обеим элементам html получен.

Доступ по имени элемента

В html есть несколько тегов у которых в спецификации предусмотрен атрибут name .

Это теги формы form, input, select, textarea и тег ссылка a.

а) Доступ из тега.

Создадим форму с двумя тегами input, значение из одного из них будет передаваться в другой по имени.

При клике на кнопку, цифра появится в поле.

Атрибуты type=»text» и type=»button» в этом примере указывают какую форму примет элемент input.

Атрибут value — значение, определяет цифру которая будет в кнопке, и цифру которая выведется в поле формы с именем calc, в теге с именем input.

б) Доступ из функции. Создадим форму с тремя тегами input. Значение из первого поля, преобразуемое в кнопке, передаётся второму полю по имени.

Здесь локальная переменная а получает доступ из функции к тегу.

В ней указывается полный путь к элементу. Сначала метод document (html страница), затем forma (имя формы), затем t1 (имя тега, к которому осуществляется доступ) и value (значение, которое введся).

В переменной s задаётся действие, выполняемое с переменной а.

Затем результат этого действия (value=s) выводится на экран во втором поле, к которому также имеется доступ по имени.

С функцией я немного забегаю вперёд, но ничего страшного, просто знайте что из функции можно получить доступ к элементу html по имени.