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

• document.getElementById()
• document.getElementsByName()
• document.getElementsByClassName()
• document.body
• document.getElementsByTagName()
• document.querySelector()
• document.querySelectorAll()
• Скрипт калькулятора стоимости
• textarea и innerHTML в Internet Explorer

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 = 'Скрипт сработал\(\)'"/>