Значение value из тега input на Javascript
Приведем распространенные способы извлечения значения value из input с примерами. Вы убедитесь, что в этом нет ничего сверхсложного.
Пример вывода значения выбранного цвета рядом с полем ввода:
| 1 2 3 4 5 6 7 8 9 | <inputtype=»color»id=»idColor»placeholder=»введите текст»/> <outputid=»rezultatColor»></output>
<script> window.oninput=functiononinputColor(){ varidColor=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 | <inputtype=»checkbox»name=»nameCheckbox»value=»1″/> <inputtype=»checkbox»name=»nameCheckbox»value=»20″/> <inputtype=»checkbox»name=»nameCheckbox»value=»300.555″onclick=»onclickCheckbox()»/> <inputtype=»checkbox»name=»nameCheckbox»value=»400″/> <outputid=»rezultatCheckbox»>1.00</output> <script> functiononclickCheckbox(){ varnameCheckbox=document.getElementsByName(‘nameCheckbox’)[2]; varrezultatCheckbox=’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 | <inputtype=»radio»name=»<b class=»vydelit»>nameRadio</b>»value=»1″checked=»checked»/> <inputtype=»radio»name=»<b class=»vydelit»>nameRadio</b>»value=»20″/> <inputtype=»radio»name=»<b class=»vydelit»>nameRadio</b>»value=»300″/> <inputtype=»radio»name=»<b class=»vydelit»>nameRadio</b>»value=»400″/> <outputid=»rezultatRadio»>1</output>
<script> window.onclick=functiononclickRadio(){ varnameRadio=document.getElementsByName(‘<b class=»vydelit»>nameRadio</b>’); for(vari=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
Пример смены класса по клику:
| 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:0auto; transition:.5s; } .classRed{ background:red; } </style>
<inputtype=»button»value=»Клик»onclick=»onclickButton()»/> <divclass=»classGreen»></div>
<script> functiononclickButton(){ varclassGreen=document.getElementsByClassName(‘classGreen’); for(vari=0;i<classGreen.length;i++){ classGreen[i].className=(classGreen[i].className==’classGreen’?’classGreenclassRed’:’classGreen’); } } </script> |
document.body – поиск по тегу body
Примеры смены h2 на h3:
| 1 2 3 | <inputtype=»button»value=»щелчок»onclick=»document.body.innerHTML = document.body.innerHTML.replace(/\u003Ch2/g, ‘\u003Ch3’);»/>
Пояснения: я меняю <h2,потому что тег может содержать атрибуты.<пишу как специальный символ в JavaScript\u003C. |
document.getElementsByTagName() – поиск по NodeList тегов
Пример замены текста h3 выше:
| 1 2 3 | <inputtype=»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 | <ulid=»d»> <li></li> <li></li> </ul>
<script> Li(); setInterval(Li,1000);
functionLi(){ d=newDate(); varmonth=newArray(«января»,»февраля»,»марта»,»апреля»,»мая»,»июня»,»июля»,»августа»,»сентября»,»октября»,»ноября»,»декабря»); varweek=newArray(«воскресенье»,»понедельник»,»вторник»,»среда»,»четверг»,»пятница»,»суббота»); 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() – поиск по селектору
Пример реализации степени заполнения полей (почта и пароль должны быть заполнены правильно):
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <style> input:focus:invalid{border:1pxsolid#eee;} input:invalid{border:2pxinsetred;} </style>
Почта<inputtype=»email»placeholder=»n.mitra@yandex.ru»onchange=»oninputEmail()»/><br> Пароль<inputtype=»password»pattern=»(?=.*\d)(?=.*[a-zA-Zа-яА-Я]).{6,}»title=»Не менее 6 знаков, в том числе хотя бы одна цифра и буква»onchange=»oninputEmail()»/><br> <progressmax=»2″value=»0″id=»rezultatProgress»>0%</progress>
<script> functiononinputEmail(){ varemail=document.querySelector(‘input[type=»email»]:valid’).value; varpassword=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 селекторов
