Текст в этом input е меняется, но сайт это игнорирует, и использует то, что было до изменений. При этом, если вручную отредактировать текст (например на «Олег1»), то эти изменения сайт воспринимает Уже пробовал и innerHTML , и прочее, и .focus() (который не срабатывает), и вызывал событие клика через .dispatchEvent(new MouseEvent(‘click’)) , ничего не срабатывает Сам сайт кидать бессмысленно, ибо до формы ещё нужно добраться, но какие есть предположения, что можно ещё сделать?
Получаем данные из поля ввода с помощью 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!На главную
Новая библиотека для создания графиков
Теперь вы можете создать дашборд за считанные секунды.
Что там у роботов?
В робототехнике происходит много интересного, эта новость могла бы быть об этом, но нет.
JavaScript
let 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 = 'Форма отправлена!'; >;
Показать ответ
Спасибо! Мы скоро всё исправим)
как сделать input в js
Для создания input с помощью JavaScript можно использовать метод createElement для создания элемента input , а затем добавить его в DOM.
Читаем весь текст во вложенных элементах или записываем свой.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Обновлено 6 октября 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство inner Text позволяет считывать или задавать текстовое содержимое элемента. При считывании текста с элемента будет возвращена строка с текстовым содержимым всех вложенных дочерних элементов. Не будет считываться только содержимое скрытых с помощью CSS элементов, а так же содержимое тегов и .
Аналогичной функциональностью обладает свойство text Content , но он возвращает содержимое всех дочерних элементов, даже скрытых:
const form = document.querySelector('form')const button = document.getElementById('submit')console.log(form.innerText)// "ИмяSubmit"button.innerText = 'Done!'console.log(button)// const form =document.querySelector('form')const button =document.getElementById('submit')console.log(form.innerText)// "ИмяSubmit" button.innerText='Done!'console.log(button)//
Как понять
Скопировать ссылку «Как понять» Скопировано
Считывание и изменение текстового содержимого – довольно распространённая задача. inner Text позволяет считывать содержимое элемента и всего потомков, но с несколькими исключениями:
не считывается содержимое тегов и ;
не считывается содержимое скрытых элементов.
Свойство может изменять только текстовое содержимое элемента, если попытаться присвоить строку с HTML, она вставится как текст и не превратится в реальные DOM-элементы. Чтобы HTML в строке сработал, используйте inner H T M L .
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Свойство inner Text работает и как геттер, и как сеттер — обращение к свойству вернёт текстовое содержимое элементов и его потомков, а установка нового значения изменит все текстовое содержимое элемента.
Например, мы хотим изменить текст в блоке после окончания загрузки:
В результате в браузере будет отображаться следующий HTML:
Data loaded!divid="loading-status"> Data loaded! div>
Установка нового текста с помощью inner Text полностью удалит все старое содержимое и запишет новое текстовое значение. Если внутри элемента были другие вложенные потомки, то все они удалятся.
Предположим, что в блоке статуса загрузки был ещё элемент отображающий иконку-лоадер.