JS и HTML шпаргалка
Java script
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
document.querySelector('.one').onclick = () => { let a = document.querySelector('.i-1').value console.log(a) } document.querySelector('.two').onclick = () => { let a = +document.querySelector('.i-2').value console.log(a + 16) } document.querySelector('.col').onclick = () => { let a = document.querySelector('.i-3').value document.querySelector('.col').style.background = a console.log(a) } document.querySelector('.dates').onclick = () => { let a = document.querySelector('.i-4').value console.log(a) } document.querySelector('.five').onchange = () => { let a = document.querySelector('.five').value console.log(a) } // document.querySelector('.five').value = 1 //обратное действие document.querySelector('.ch-1').onchange = () => { if (document.querySelector('.ch-1').checked == true) { let a = document.querySelector('.ch-1').value console.log(a) } } //document.querySelector('.ch-1').checked = true //обратное действие // С кнопокой полный гуд document.querySelector('.radio').onclick = () => { let r = document.querySelectorAll('input[name="r"]') for (let i = 0; i < r.length; i++) { if (r[i].checked) { console.log(r[i].value) break } } } // Без кнопки конструкция не работает! // let r = document.querySelectorAll('input[name="r"]') // for (let i = 0; i < r.length; i++) { // if (r[i].checked) { // console.log(r[i].value) // break // } // } |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<p><input type="text" class="i-1"><button class="one">text</button></p> <p><input type="number" class="i-2"><button class="two">number</button></p> <p><input type="color" class="i-3"><button class="col">color</button></p> <p><input type="date" class="i-4"><button class="dates">dates</button></p> <select name="" class="five"> <option value="1">один</option> <option value="2">два</option> <option value="3">три</option> </select> <p><label><input type="checkbox" class="ch-1" value="Таки да">Чек бокс!</label></p> <p><label for=""><input type="radio" value="10" name="r">десять</label></p> <p><label for=""><input type="radio" value="5" name="r">пять</label></p> <p><label for=""><input type="radio" value="0" name="r" checked>ноль</label></p> <button class="radio">Подтвердите ваш выбор</button> <script src="script.js"></script> |