document.getElementById() – поиск по тегу с атрибутом id
Задача: нужно вывести значение выбранного цвета рядом с полем ввода:
|
1 2 3 4 5 6 7 8 9 |
<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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<input type="radio" name="<b class="vydelit">nameRadio</b>" value="1" checked="checked"/> <input type="radio" name="<b class="vydelit">nameRadio</b>" value="20"/> <input type="radio" name="<b class="vydelit">nameRadio</b>" value="300"/> <input type="radio" name="<b class="vydelit">nameRadio</b>" value="400"/> <output id="rezultatRadio">1</output> <script> window.onclick = function onclickRadio() { var nameRadio = document.getElementsByName('<b class="vydelit">nameRadio</b>'); 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):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<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:
|
1 2 3 |
<input type="button" value="щелчок" onclick="document.body.innerHTML = document.body.innerHTML.replace(/\u003Ch2/g, '\u003Ch3');" /> Пояснения: я меняю <h2, потому что тег может содержать атрибуты. < пишу как специальный символ в JavaScript \u003C. |
document.getElementsByTagName() – поиск по NodeList тегов
Задача: заменить текст h3 выше:
|
1 2 3 |
<input type="button" value="Щелчок" onclick="document.getElementsByTagName('h3')[4].innerHTML = 'Скрипт сработал\(\)'"/> Скрипт сработал\(\) - это то, на что мы заменяем наш текст. Он выглядит как Скрипт сработал(). Куда же делись символы \? Они реализуют экранирование скобок, чтобы те были рассмотрены как текстовые символы, а не как код скрипта. |
Задача: часы и дату разбить на два тега в списке id=”d”:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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 должен быть внесён правильно.
Почта
Пароль
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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
|
1 |
<input type="button" value="Щелчок" onclick="document.querySelectorAll('h2, h3')[4].innerHTML = 'Скрипт сработал\(\)'"/> |
Источник: http://shpargalkablog.ru/2013/04/value-input-javascript.html