Как добавить input через js

Курсы javascript

Здравствуйте!
Задача — к имеющемуся блоку радио-кнопок , заданному в html, программно добавить еще одну радиокнопку с текстом и реакцию на событие onchange.
Посмотрите, пожалуйста, на код — он добавляет радио-кнопку, но событие onchange в нем не работает и ТЕКСТ радио-кнопки («qq») на экране не высвечивается. Если раскомментировать 2 строки внизу, результат не меняется.
Подскажите, пожалуйста, что не так (сами понимаете, в javascript я новичок):

      Ускор = 4 
Ускор = 2 
Норм = 1 
Замедл = 0.5

как сделать input в js

Для создания input с помощью JavaScript можно использовать метод createElement для создания элемента input , а затем добавить его в DOM.

Пример создания input с типом «text»:

const input = document.createElement('input'); input.type = 'text'; document.body.append(input);

В этом примере мы создали элемент input , задали ему тип «text» и добавили его на страницу с помощью метода append .

Можем задавать и другие атрибуты для элемента input , такие как name , value , placeholder и т.д. Например, чтобы добавить атрибут name :

const input = document.createElement('input'); input.type = 'text'; input.name = 'myInput'; document.body.append(input);

Как и для других элементов DOM-дерева, для данного input мы можем добавить обработчик события:

const input = document.createElement('input'); input.type = 'text'; input.addEventListener('input', (event) =>  console.log(event.target.value); >); document.body.append(input);

js передать значение в input

Для передачи значения в input элемент на странице в JavaScript нужно:

Получить ссылку на элемент input — это можно сделать с помощью метода document.querySelector() и передать в него соответствующий селектор, например:

const inputElement = document.querySelector('#my-input');

Здесь мы ищем элемент с id=»my-input» .

Установить значение для input элемента — это можно сделать присвоив значение свойству value элемента input , например:

inputElement.value = 'Hello World';

Здесь мы устанавливаем значение ‘Hello World’ для свойства value элемента input .

 type="text" id="my-input" /> const inputElement = document.querySelector('#my-input'); inputElement.value = 'Hello World';

После выполнения этого кода в поле input будет установлено значение ‘Hello World’.

События: change, input, cut, copy, paste

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

Событие: change

Событие change срабатывает по окончании изменения элемента.

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

Пока мы печатаем в текстовом поле в примере ниже, событие не происходит. Но когда мы перемещаем фокус в другое место, например, нажимая на кнопку, то произойдёт событие change :

Для других элементов: select , input type=checkbox/radio событие запускается сразу после изменения значения:

Событие: input

Событие input срабатывает каждый раз при изменении значения.

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

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

С другой стороны, событие input не происходит при вводе с клавиатуры или иных действиях, если при этом не меняется значение в текстовом поле, т.е. нажатия клавиш ⇦ , ⇨ и подобных при фокусе на текстовом поле не вызовут это событие.

Нельзя ничего предотвратить в oninput

Событие input происходит после изменения значения.

Поэтому мы не можем использовать event.preventDefault() там – будет уже слишком поздно, никакого эффекта не будет.

События: cut, copy, paste

Эти события происходят при вырезании/копировании/вставке данных.

Они относятся к классу ClipboardEvent и обеспечивают доступ к копируемым/вставляемым данным.

Мы также можем использовать event.preventDefault() для предотвращения действия по умолчанию, и в итоге ничего не скопируется/не вставится.

Например, код, приведённый ниже, предотвращает все подобные события и показывает, что мы пытаемся вырезать/копировать/вставить:

Технически, мы можем скопировать/вставить всё. Например, мы можем скопировать файл из файловой системы и вставить его.

Существует список методов в спецификации для работы с различными типами данных, чтения/записи в буфер обмена.

Но обратите внимание, что буфер обмена работает глобально, на уровне ОС. Большинство браузеров в целях безопасности разрешают доступ на чтение/запись в буфер обмена только в рамках определённых действий пользователя, к примеру, в обработчиках событий onclick .

Также запрещается генерировать «пользовательские» события буфера обмена при помощи dispatchEvent во всех браузерах, кроме Firefox.

Итого

События изменения данных:

Событие	Описание	Особенности
change	Значение было изменено.	Для текстовых полей срабатывает при потере фокуса.
input	Срабатывает при каждом изменении значения.	Запускается немедленно, в отличие от change .
cut/copy/paste	Действия по вырезанию/копированию/вставке.	Действие можно предотвратить. Свойство event.clipboardData предоставляет доступ на чтение/запись в буфер обмена…

Задачи

Депозитный калькулятор

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

Любое изменение введённых данных должно быть обработано немедленно.

// initial: начальная сумма денег // interest: проценты, например, 0.05 означает 5% в год // years: сколько лет ждать let result = Math.round(initial * (1 + interest) ** years);