Получить значение value из тега input | JavaScript — Примеры

Получить значение value из тега input | JavaScript

document.getElementById() - поиск по тегу с атрибутом id

id на веб-странице может быть присвоен только один раз одному тегу HTML

Задача: нужно вывести значение выбранного цвета рядом с полем ввода:

<input type="color" id="idColor" placeholder="введите текст"/>
<output id="rezultatColor"></output>

<script>
window.oninput = function oninputColor() {
  var idColor = document.getElementById('idColor').value;
  document.getElementById('rezultatColor').innerHTML = idColor;
}
</script>

document.getElementsByName() - поиск по NodeList тегов с атрибутом name

Задача: прибавить значение только третьего включенного чекбокса, округлить до сотых и показать в формате 0.00 (с двумя знаками после запятой):
1.00

<input type="checkbox" name="nameCheckbox" value="1"/>
<input type="checkbox" name="nameCheckbox" value="20"/>
<input type="checkbox" name="nameCheckbox" value="300.555" onclick="onclickCheckbox()"/>
<input type="checkbox" name="nameCheckbox" value="400"/>
<output id="rezultatCheckbox">1.00</output>
<script>
function onclickCheckbox() {
  var nameCheckbox = document.getElementsByName('nameCheckbox')[2];
  var rezultatCheckbox = '1.00'
  if (nameCheckbox.checked)
    rezultatCheckbox = (parseFloat(rezultatCheckbox) + parseFloat(nameCheckbox.value)).toFixed(2);
  document.getElementById('rezultatCheckbox').innerHTML = rezultatCheckbox;
}
</script>

Пояснения: имеется четыре тега input с name="nameCheckbox". [0] - это первый по счёту, соответственно, [2] будет третьим.

Задача: показать значение активного radio:
1

<input type="radio" name="nameRadio" value="1" checked="checked"/>
<input type="radio" name="nameRadio" value="20"/>
<input type="radio" name="nameRadio" value="300"/>
<input type="radio" name="nameRadio" value="400"/>
<output id="rezultatRadio">1</output>

<script>
window.onclick = function onclickRadio() {
  var nameRadio = document.getElementsByName('nameRadio');
  for (var i = 0; i < nameRadio.length; i++) {
    if (nameRadio[i].type === 'radio' && nameRadio[i].checked) {
        rezultatRadio = nameRadio[i].value;       
    }
  }
  document.getElementById('rezultatRadio').innerHTML = rezultatRadio;
}
</script>

document.getElementsByClassName() - поиск по NodeList тегов с атрибутом class

Задача: как поменять класс по клику (я предпочитаю это делать только силами CSS):

<style>
.classGreen {
  background: green;
  width: 130px;
  height: 130px;
  margin: 0 auto;
  transition: .5s;
}
.classRed {
  background: red;
}
</style>

<input type="button" value="Клик" onclick="onclickButton()"/>
<div class="classGreen"></div>

<script>
function onclickButton() {
  var classGreen = document.getElementsByClassName('classGreen');
  for (var i = 0; i < classGreen.length; i++) {
    classGreen[i].className = (classGreen[i].className == 'classGreen' ? 'classGreen classRed' : 'classGreen');
  }
}
</script>

document.body - поиск по тегу body

Задача: сменить все h2 на h3:

<input type="button" value="щелчок" onclick="document.body.innerHTML = document.body.innerHTML.replace(/\u003Ch2/g, '\u003Ch3');" />

Пояснения: я меняю <h2, потому что тег может содержать атрибуты. < пишу как специальный символ в JavaScript \u003C.

document.getElementsByTagName() - поиск по NodeList тегов

Задача: заменить текст h3 выше:

<input type="button" value="Щелчок" onclick="document.getElementsByTagName('h3')[4].innerHTML = 'Скрипт сработал\(\)'"/>

Скрипт сработал\(\) - это то, на что мы заменяем наш текст. Он выглядит как Скрипт сработал(). Куда же делись символы \? Они реализуют экранирование скобок, чтобы те были рассмотрены как текстовые символы, а не как код скрипта.

Задача: часы и дату разбить на два тега в списке id="d":

<ul id="d">
  <li></li>
  <li></li>
</ul>

<script>
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()<10)?"0":"")+d.getHours()+':'+((d.getMinutes()<10)?"0":"")+d.getMinutes()+':'+((d.getSeconds()<10)?"0":"")+d.getSeconds();
}
</script>

document.querySelector() - поиск по селектору

Что такое селекторы можно почитать тут. Благодаря псевдоклассам CSS теперь легко осуществлять проверку формы.

Задача: показать степень заполнения полей, пароль и email должен быть внесён правильно.
Почта
Пароль
0%

<style>
input:focus:invalid { border: 1px solid #eee; }
input:invalid { border: 2px inset red; }
</style>

Почта <input type="email" placeholder="n.mitra@yandex.ru" onchange="oninputEmail()"/><br>
Пароль <input type="password" pattern="(?=.*\d)(?=.*[a-zA-Zа-яА-Я]).{6,}" title="Не менее 6 знаков, в том числе хотя бы одна цифра и буква" onchange="oninputEmail()"/><br>
<progress max="2" value="0" id="rezultatProgress">0%</progress>

<script>
function oninputEmail() {
  var email = document.querySelector('input[type="email"]:valid').value;
  var password = document.querySelector('input[type="password"]:valid').value;
  document.querySelector('progress').value = '0';
  document.querySelector('progress').value = parseFloat(password == '' ? '0' : '1') + parseFloat(email == '' ? '0' : '1');
}
</script>

document.querySelectorAll() - поиск по NodeList селекторов

Помните этот пример? Там поиск идёт только по h3. Именно на него произойдет замена по этой кнопке. Если её не нажимать, то скрипт не будет работать. А вот так будет и при h2, и при h3

<input type="button" value="Щелчок" onclick="document.querySelectorAll('h2, h3')[4].innerHTML = 'Скрипт сработал\(\)'"/>
в f t
наверх ↑

11 комментариев:

Анонимный
Здравствуйте!
У меня вот такой вопрос. Не подскажите.
Есть 2 поля и две кнопки.
Я хочу VALUE кнопок передать в поля.

Просто значение например 1 кнопки передать в 1 поле понятно. Но хотелось бы. Что бы в поле попадало значение кнопки которую нажал. Не важно 1 или 2 или 11.

Вот что-то начал но дальше…

form
input id= "q" type="text" value="1"
input id= "a" type="text" value="2"
/form

form

input id= "x" name="poga2" type="button" value="L" onclick="q.value = fun()"
input id= "o" name="poga3" type="button" value="M"

/form


script
function fun(){
var per1=document.getElementById('q').value;
var per2=document.getElementById('x').value;


if (per1=='1' && per2=='L'){
per1=per2;
}


return per1;
}


/script
Буду очень благодарен за подсказку.
До свидания.
NMitra
Здравствуйте, пример http://jsfiddle.net/NMitra/dhj7epc4/

<div id="raz">
<input type="button" value="раз"/>
<input type="button" value="два"/>
<input type="text"/>
</div>

<script>
var button = document.querySelectorAll('#raz [type="button"]');
for (var i = 0; i < button.length; i++) {
button[i].addEventListener('click', raz, false);
}
function raz() {
document.querySelector('#raz [type="text"]').value = this.value;
}
</script>
Анонимный
Здравствуйте!
Спасибо Вам за ответ. Спасибо за помощь.
Анонимный
Здравствуйте!
Подскажите как перебрать список с помощью javascript :
ul
li1/li
li2/li
li3/li
li4/li
li5/li
li6/li
li7/li
/ul

script
var el = document.querySelector('li');

for(var i = 0; i < el.length; i++) {
console.log(el[i]);
}
/script
NMitra
Почти document.querySelectorAll('li') - пример, http://jsfiddle.net/NMitra/07ja16n7/

var el = document.querySelectorAll('li');
for(var i = 0; i < el.length; i++) {
alert(el[i].innerHTML);
}
NMitra
Можно так - http://jsfiddle.net/NMitra/07ja16n7/1/

var el = document.querySelectorAll('li');
el = Array.prototype.slice.call(el);
el.forEach(function(el) {
alert(el.innerHTML);
})
Анонимный
Благодарствую.. 8:)
Очень помогли.. 2-ой вариант, вообще, что-то новенькое для меня...
да будем вам счастье, милый друг ...
впредь ваш поклонник ...
Анонимный
помогите написать скрипт калькулятор расчета стоимости грузоперевозок
NMitra
Очень здорово получается, если через API Яндекс карт считать километраж https://tech.yandex.ru/maps/ Но я такое делать не пробовала.

Для простого калькулятора можно обратиться ко мне на почту n.mitra@yandex.ru, но опять таки бесплатно я не буду делать. Извините, времени совсем свободного нет.
Алексей Савин
Здравствуйте. Как написать скрипт для нескольких одинаковых форм?
NMitra
Здравствуйте, самое простое - перечислить через for
пример http://jsfiddle.net/NMitra/4L2ses6z/
статья http://shpargalkablog.ru/2013/10/for-javascript.html