- Получить значение value из тега input | JavaScript
- document.getElementById() — поиск по тегу с атрибутом id
- document.getElementsByName() — поиск по NodeList тегов с атрибутом name
- document.getElementsByClassName() — поиск по NodeList тегов с атрибутом class
- document.body — поиск по тегу body
- document.getElementsByTagName() — поиск по NodeList тегов
- document.querySelector() — поиск по селектору
- document.querySelectorAll() — поиск по NodeList селекторов
- 11 комментариев:
- Html input value script
- Что нужно для получения данных из value с помощью javascript
- Код для получения value с помощью querySelector через атрибут name
- Получить значение value input в javascript -> querySelector(tag)
- Соберем весь код вместе:
- Как получить значение value input через id
- Как получить значение value input с помощью getElementById
- Как получить значение value input через Id без функции
- Результат обращения и получения значения value из input без функции
- Как получить значение value input через getElementsByClassName
- Пример получения значения value input через getElementsByClassName
- Как получить значение value input через getElementsByName
- Пример получения значения value input через getElementsByName
- Как получить значение value input в переменную
- Что вам потребуется, для того, чтобы получить значение value input в переменную
- Что означает value в javascript
- Как привязать значение input к тегу js
- Input Text value Property
- Browser Support
- Syntax
- Property Values
- Technical Details
- More Examples
- Example
- Example
- Example
- Example
- Example
- Получаем данные из поля ввода с помощью input.value
Получить значение value из тега input | JavaScript
document.getElementById() — поиск по тегу с атрибутом id
id на веб-странице может быть присвоен только один раз одному тегу HTML Задача: нужно вывести значение выбранного цвета рядом с полем ввода:
idColor" placeholder="введите текст"/>
document.getElementsByName() — поиск по NodeList тегов с атрибутом name
Задача: прибавить значение только третьего включенного чекбокса, округлить до сотых и показать в формате 0.00 (с двумя знаками после запятой):
1.00
name="nameCheckbox" value="1"/> name="nameCheckbox" value="20"/> name="nameCheckbox" value="300.555" onclick="onclickCheckbox()"/> name="nameCheckbox" value="400"/> Пояснения: имеется четыре тега input с name="nameCheckbox". [0] - это первый по счёту, соответственно, [2] будет третьим.
nameRadio" value="1" checked="checked"/> nameRadio" value="20"/> nameRadio" value="300"/> nameRadio" value="400"/>
document.getElementsByClassName() — поиск по NodeList тегов с атрибутом class
.classGreen < background: green; width: 130px; height: 130px; margin: 0 auto; transition: .5s; >.classRedclass="classGreen">
document.body — поиск по тегу body
document.body.innerHTML = document.body.innerHTML.replace(/\u003Ch2/g, '\u003Ch3');" /> Пояснения: я меняю , потому что тег может содержать атрибуты. пишу как специальный символ в JavaScript \u003C.
document.getElementsByTagName() — поиск по NodeList тегов
h3')[4].innerHTML = 'Скрипт сработал\(\)'"/> Скрипт сработал\(\) - это то, на что мы заменяем наш текст. Он выглядит как Скрипт сработал(). Куда же делись символы \? Они реализуют экранирование скобок, чтобы те были рассмотрены как текстовые символы, а не как код скрипта.
Li(); setInterval(Li,1000); function Li() < d = new Date(); var month=new Array("января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря"); var week=new Array("воскресенье","понедельник","вторник","среда","четверг","пятница","суббота"); document.getElementById('d').getElementsByTagName('li')[0].innerHTML='Дата: '+d.getDate()+' '+month[d.getMonth()]+' '+d.getFullYear()+' года, '+week[d.getDay()]; document.getElementById('d').getElementsByTagName('li')[1].innerHTML='Время: '+((d.getHours()
document.querySelector() — поиск по селектору
Задача: показать степень заполнения полей, пароль и email должен быть внесён правильно.
Почта
Пароль
input:focus:invalid < border: 1px solid #eee; >input:invalid Почта
Пароль " title="Не менее 6 знаков, в том числе хотя бы одна цифра и буква" onchange="oninputEmail()"/>
document.querySelectorAll() — поиск по NodeList селекторов
Помните этот пример? Там поиск идёт только по h3. Именно на него произойдет замена по этой кнопке. Если её не нажимать, то скрипт не будет работать. А вот так будет и при h2, и при h3
h2, h3')[4].innerHTML = 'Скрипт сработал\(\)'"/>
11 комментариев:
Анонимный Здравствуйте!
У меня вот такой вопрос. Не подскажите.
Есть 2 поля и две кнопки.
Я хочу VALUE кнопок передать в поля.
Просто значение например 1 кнопки передать в 1 поле понятно. Но хотелось бы. Что бы в поле попадало значение кнопки которую нажал. Не важно 1 или 2 или 11.
Вот что-то начал но дальше…
form
input type=»text» value=»1″
input type=»text» value=»2″
/form
input name=»poga2″ type=»button» value=»L» onclick=»q.value = fun()»
input name=»poga3″ type=»button» value=»M»
script
function fun() var per1=document.getElementById(‘q’).value;
var per2=document.getElementById(‘x’).value;
/script
Буду очень благодарен за подсказку.
До свидания.
NMitra Здравствуйте, пример http://jsfiddle.net/NMitra/dhj7epc4/
Анонимный Здравствуйте!
Спасибо Вам за ответ. Спасибо за помощь.
Анонимный Здравствуйте!
Подскажите как перебрать список с помощью javascript :
ul
li1/li
li2/li
li3/li
li4/li
li5/li
li6/li
li7/li
/ul
script
var el = document.querySelector(‘li’);
Html input value script
Если(например) у тега input есть атрибут name, то мы можем обратиться к тегу через атрибут name с помощью querySelector.
Что нужно для получения данных из value с помощью javascript
Нам потребуется тег input и внутрь поместим атрибут name
В данном случае, чтобы в живую показать, как будет происходить получение данных из input нам потребуется onclick.
На кнопку button повесим onclick с функцией
И уже в скрипте получим данные из value с помощью querySelector
И чтобы мы могли увидеть, что мы получили из input выведем через alert
Код для получения value с помощью querySelector через атрибут name
Далее используем выше приведенный рабочий код, как обратиться к инпуту с помощью querySelector через name:
Жми! Здесь обращаю ваше внимание.
Что querySelector — это универсальный инструмент и с помощью него можно таким же образом обратиться и к id, классу, вообще к любому атрибуту!(у нас не стоит такая задача прямо здесь это рассмотреть!)
Получить значение value input в javascript -> querySelector(tag)
Если у вас на странице есть единственный input
Либо ваш input стоит в Dom в самом верху, то мы можем обратиться к этому тегу input и получить оттуда данные из value
Опять начинаем с тега input и больше ничего не будет.
Чтоб опять вживую увидеть нам потребуется button с onclick
И далее повторяем все то, что делали в предыдущем пункте — получаем данные из input
И выводим через alert полученные данные из value
Соберем весь код вместе:
Как получить значение value input через id
Мы уже выше сказали, что обратиться к input можно по разному, в отношении id — сразу возникает два способа, первый, о котором сразу вспоминают все :
Как получить значение value input с помощью getElementById
У нас есть инпутinput, в котором есть value и у него есть какое-то значение + у него должен быть какой-то id. То к нему -то можно обратимся с помощью getElementById!
Сделаем кнопку с онклик, чтобы было в движении, в онклик будет функция, а в функции напишем alert
Чтобы получить данные в алерт нажмите кнопку !
Как получить значение value input через Id без функции
Можно ли получить значение input через Id без функции ?! Легко!
Берем выше идущий код, и вместо вот этого : document.getElementById(» name_id «).value пишем просто : name_id .value
Результат обращения и получения значения value из input без функции
Как получить значение value input через getElementsByClassName
Предположим, что у инпутаinput кроме класса нет ничего, и нам требуется обратиться к данному value через класс!
Конечно же мы можем обратиться к данному инпуту с помощью getElementsByClassName
Скопируем выше идущий код, добавим уже не ид, а класс(example). Как вы наверное знаете, что getElementsByClassName получает HTMLCollection и поэтому, нам нужно поставить квадратные скобки и указать порядковый номер данного инпута с этим классом — это у нас первый, поэтому ставим 0
Пример получения значения value input через getElementsByClassName
Как получить значение value input через getElementsByName
Что касается имени name мы уже к нему обращались, но не использовали getElementsByName , а это функция может обращаться к имени, поэтому скопируем выше идущий код и класс поменяем на name(example). И getElementsByName получает HTMLCollection и поэтому, нам нужно поставить квадратные скобки и указать порядковый номер данного инпута с этим именем — если вы помните, то name(example) мы уже использовали чуть выше в способе получения value через querySelector и этот элемент с name второй, то ставим 1(0 — это первый, 1 — это второй), естественно заменяем название функции.
Пример получения значения value input через getElementsByName
Как получить значение value input в переменную
Для того, чтобы получить значение value input в переменную, то вам всего-то навсего нужно взять выше описанные способы получения value значения из input и поставить вместо alert , какую-то переменную и вот ваше значение уже внутри переменной!
Что вам потребуется, для того, чтобы получить значение value input в переменную
Как минимум должен быть тег input .
Нужно, как обычно, обратиться к тегу любым доступным способом.
В скрипте, в функции, где у вас будет просит ходить движение скрипта(в выше приведенных примерах это onclick) создаем переменную и присваиваем её значение полученное из тега.
Что означает value в javascript
Value в javascript — ничего не означает, потому, что value — это атрибут из html
javascript — может работать с данными из value : 1. — получить данные из value ,
2. — изменить value,
3. — либо удалить.
javascript — может работать с атрибутом value : 1. — удалить атрибут value
2. — добавить атрибут value
3. — заменить атрибут value
Как привязать значение input к тегу js
Интересный поисковый запрос : «как привязать значение input к тегу js«. Ответ: ничего привязывать никуда не нужно!
Нужно просто взять и получить данные из input , чему и была посвящена полностью данная страница!
Input Text value Property
The value property sets or returns the value of the value attribute of a text field.
The value property contains the default value OR the value a user types in (or a value set by a script).
Browser Support
Syntax
Return the value property:
Property Values
Technical Details
More Examples
Example
Get the value of a text field:
Example
var at = document.getElementById(«email»).value.indexOf(«@»);
var age = document.getElementById(«age»).value;
var fname = document.getElementById(«fname»).value;
submitOK = «true»;
if (fname.length > 10) alert(«The name may have no more than 10 characters»);
submitOK = «false»;
>
if (isNaN(age) || age < 1 || age >100) alert(«The age must be a number between 1 and 100»);
submitOK = «false»;
>
if (at == -1) alert(«Not a valid e-mail!»);
submitOK = «false»;
>
if (submitOK == «false») return false;
>
Example
var mylist = document.getElementById(«myList»);
document.getElementById(«favorite»).value = mylist.options[mylist.selectedIndex].text;
Example
var no = document.getElementById(«no»);
var option = no.options[no.selectedIndex].text;
var txt = document.getElementById(«result»).value;
txt = txt + option;
document.getElementById(«result»).value = txt;
Example
An example that shows the difference between the defaultValue and value property:
Получаем данные из поля ввода с помощью 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 .