Добавление input в html через JS
Есть форма, при нажатии на другое должно появляться дополнительное поле через JS. ( на данный момент через display none, но хотелось бы через js. Я пытался реализовать нечего не получилось. Как с помощью innerHTML добавлять в test2 инпут? )
$('.test').click(function(e) < $('.test2').addClass('active'); >); $('.test1').click(function(e) < $('.test2').removeClass('active'); >);.test2 < display: none; >.test2.active
ДругоеОсновное
Отслеживать
задан 12 мая 2020 в 18:34
345 2 2 серебряных знака 16 16 бронзовых знаков
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
$('.test').click(function(e) < $('.test2').html(''); >); $('.test1').click(function(e) < $('.test2').html(''); >); Другое Основное let check1 = document.querySelector(".test > input"); let check2 = document.querySelector(".test1 > input"); let input_box = document.querySelector(".test2"); check1.onclick = (ev) => < if(ev.target.checked) < input_box.innerHTML = ''; setTimeout(() => < document.querySelector(".test2 input").classList.remove('fade-out'); document.querySelector(".test2 input").classList.add('fade-in'); >,1); > > check2.onclick = (ev) => < if(ev.target.checked) < document.querySelector(".test2 input").classList.remove('fade-in'); document.querySelector(".test2 input").classList.add('fade-out'); setTimeout(() =>< input_box.innerHTML = ''; >,1000); > >.fade-out < opacity: 0; transition: opacity .4s ease-out; >.fade-in
Другое Основное Курсы javascript
Здравствуйте!
Задача — к имеющемуся блоку радио-кнопок , заданному в html, программно добавить еще одну радиокнопку с текстом и реакцию на событие onchange.
Посмотрите, пожалуйста, на код — он добавляет радио-кнопку, но событие onchange в нем не работает и ТЕКСТ радио-кнопки («qq») на экране не высвечивается. Если раскомментировать 2 строки внизу, результат не меняется.
Подскажите, пожалуйста, что не так (сами понимаете, в javascript я новичок):
Ускор = 4
Ускор = 2
Норм = 1
Замедл = 0.529.08.2017, 00:05
Регистрация: 27.05.2010
Сообщений: 33,031Ускор = 4
Ускор = 2
Норм = 1
Замедл = 0.5Последний раз редактировалось рони, 04.09.2017 в 01:06 .
03.09.2017, 22:09
Интересующийся
Регистрация: 28.08.2017
Сообщений: 14А почему не работает реакция на onchange, что я неправильно сделал ?
03.09.2017, 22:32
Интересующийся
Регистрация: 28.08.2017
Сообщений: 14Рони, у меня еще вопрос:
если после «var new_text = document.createTextNode(«qqq»);»я задаю новый текст, присваивая значение атрибуту new_text.innerHTML,
то текст новой кнопки не меняется, т.е. остается = «qqq».
Каким образом и я могу присвоить new_text строку с HTML-тегами ?
03.09.2017, 22:36
Регистрация: 01.12.2016
Сообщений: 3,650new_text.textContentnew_text.innerHTML03.09.2017, 23:18
Интересующийся
Регистрация: 28.08.2017
Сообщений: 14J0hnik, пробовал «new_text.textContent», но насколько я понял, это обычный текст, т.е. теги в нем не воспринимаются.
А мне нужно добавить текст с тегами.03.09.2017, 23:44
Регистрация: 01.12.2016
Сообщений: 3,650Ускор = 4
Ускор = 2
Норм = 1
Замедл = 0.5Получаем данные из поля ввода с помощью input.value
Мы научились с помощью скрипта изменять текст на странице, когда пользователь отправляет форму. У нас это форма подписки на рассылку, и нам нужно сообщить пользователю, что он успешно подписался. Сообщение будет выглядеть так:
Адрес e-mail добавлен в список получателей рассылки.Адрес электронной почты в сообщении должен быть тем, который введёт пользователь. Как его получить?
Нам поможет особое свойство, которое есть у полей ввода, — value . Допустим, на странице есть поле ввода input :
Босс проходил мимо и ввёл туда своё имя — Кекс. С помощью свойства value мы можем получить данные из этого поля ввода. А после, например, вывести их в консоль:
let input = document.querySelector('input'); console.log(input.value); // Выведет: КексА ещё мы можем вывести данные из поля ввода прямо на страницу. Представим, что у нас на странице есть абзац, который мы нашли и сохранили в переменную paragraph . Мы можем сделать так:
paragraph.textContent = input.value;И теперь то, что ввёл пользователь в поле input , отобразится на странице как текстовое содержимое элемента paragraph .
В нашем случае пользователь вводит свой адрес в поле с классом subscription-email . Найдём его и скажем JavaScript вывести полученные данные на страницу.
Почему бы не прочитать текст из поля ввода с помощью textContent ? Если мы попытаемся это сделать, то получим пустую строку. Для JavaScript поля формы не имеют текстового содержимого, их значения хранятся именно в value .
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим
- script.js Сплит-режим
FlashNews! На главную
Теперь вы можете создать дашборд за считанные секунды.
В робототехнике происходит много интересного, эта новость могла бы быть об этом, но нет.
JavaScriptlet page = document.querySelector(‘.page’); let themeButton = document.querySelector(‘.theme-button’); themeButton.onclick = function() < page.classList.toggle('light-theme'); page.classList.toggle('dark-theme'); >; let message = document.querySelector(‘.subscription-message’); let form = document.querySelector(‘.subscription’); // Объявите переменную здесь form.onsubmit = function(evt) < evt.preventDefault(); // Измените значение textContent на следующей строке message.textContent = 'Форма отправлена!'; >;
Показать ответ
Спасибо! Мы скоро всё исправим)
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’.