Получение значений и изменение состояния HTML элементов с помощью Javascript
В прошлых заданиях мы с вами находили элементы и, скажем так, изучали их, считывая и выводя в
консоль различные характеристики (св-ва, атрибуты) этих элементов. Сегодня мы с вами потренируемся
менять свойства найденных элементов.
Смотрите, какая штука, помните форму логина?
Например, пользователь нажимает кнопку LogIn, а ему в ответ обводит границу поля красным:
Что произошло? input приобрёл новый css-класс, который и добавил красную границу.
В общем, что мы делаем? Меняем текущее состояние html-элементов.
Давайте тренироваться, что можно изменять и как.
<input value="Dmitry" class="first-name-input default-input" id="first-name" />
<input value="Kuzyuberdin" class="last-name-input default-input" id="last-name" />
<input value="Minsk city" class="address-input default-input" id="address" />
<select id="cities">
<option>Kiev</option>
<option>Minsk</option>
<option selected>Moscow</option>
</select>
<textarea id="hobbies">JS, CSS, HTML</textarea>
<div id="avatar-wrapper">
<img
id="avatar"
src="https://pp.userapi.com/c631924/v631924026/44d7/AiFmeYaLmTc.jpg"
alt="аватар"
/>
</div>
<button id="make-changes">go</button>
<script>
const goButton = document.getElementById("make-changes")
goButton.onclick = function () {}
// тому что слева, мы присваиваем то, что что справа
const firstNameId = "first-name"
// = это оператор присваивания ... то есть то что слева (переменная),
// ей присваивается значение справа.
const firstNameEl = document.getElementById(firstNameId)
// а можно не создавать отдельную переменную для id и сразу передавать
// значение id в метод getElementById
const lastNameEl = document.getElementById("last-name")
const addressEl = document.getElementById("address")
const citiesEl = document.getElementById("cities")
const hobbiesEl = document.getElementById("hobbies")
const avatarWrapperEl = document.getElementById("avatar-wrapper")
const avatarEl = document.getElementById("avatar")
// то это значит, что firstNameEl.value приобретёт новое значение 'Andrey'
firstNameEl.value = "Andrey"
// lastNameEl.setAttribute('value', 'kamasutra')
</script>
Обратите внимание на вот эту строку в этом коде:
firstNameEl.value = "Andrey"
Найденному элементу (input) мы меняем значение, которое в нём напечатано, однако, значение в
html разметке останется прежним. При обновлении страницы можно заменить как происходить изменение
значения.
Таким образом значение изменится как в input, так и в html разметке:
lastNameEl.setAttribute("value", "kamasutra")
Добавить внутрь тэга script
window.alert(lastNameEl.className)
lastNameEl.className = "last-name-input default-input error-input"
// раскомеентируй строку и добавь ссылку на изображение
// avatarEl.src = "https://"
avatarEl.title = "I am avatar"
Добавить перед или после тэга body.
<style>
.default-input {
border: green 5px solid;
padding: 5px;
}
.error-input {
border-color: red;
}
</style>
Изменение значений select и textarea
// значение изменится на Minsk
citiesEl.value = "Minsk"
// select будет пустым, поскольку такое значение отсутсвует
citiesEl.value = "Minsk2"
hobbesEl.value = "I have not interests"
Изменение значений div
// значение изменится на abrakadabra
avatarWrapperEl.innerHTML = "abrakadabra"
// должны получить список
avatarWrapperEl.innerHTML = "<ul><li>1</li><li>2</li></ul>"
Конкатенация строк
1. Одинарные кавычки внутри двойных
avatarWrapperEl.innerHTML = "<ul id='list'><li>1</li><li>2</li></ul>"
2. Двойные внутри одинарных
avatarWrapperEl.innerHTML = '<ul id="list"><li>1</li><li>2</li></ul>'
3. Экранизация кавычек
avatarWrapperEl.innerHTML = "<ul id='\list\'><li>1</li><li>2</li></ul>"
Заключительный шаг, находим наш новый элемент по id
//найдем наш список по id:
const listId = "list"
const list = document.getElementById(listId)
window.alert(list.innerHTML)
🏠 Домашнее задание
Часть 1. Повторение пройденного материала
1. Обратите внимание, в HTML файле в инпуте first-name написано Dmitry, но кликаем на кнопку и
видим в браузере имя Andrey. Почему? Потому что JS нашёл этот элемент и изменил его значение
value.
<input value="Dmitry" class="first-name-input default-input" id="first-name" />
<input value="Kuzyuberdin" class="last-name-input default-input" id="last-name" />
<input value="Minsk city" class="address-input default-input" id="address" />
<select id="cities">
<option>Kiev</option>
<option>Minsk</option>
<option selected>Moscow</option>
</select>
<textarea id="hobbies">JS, CSS, HTML</textarea>
<div id="avatar-wrapper">
<img
id="avatar"
src="https://pp.userapi.com/c631924/v631924026/44d7/AiFmeYaLmTc.jpg"
alt="аватар"
/>
</div>
<button id="make-changes">get</button>
<script>
const firstNameEl = document.getElementById("first-name")
const goButton = document.getElementById("make-changes")
firstNameEl.value = "Andrey"
const getNameFirstName = document.getElementById("first-name")
goButton.onclick = function () {
alert(getNameFirstName.value)
}
</script>
2. Поменяйте таким же образом значения value для всех инпутов и textarea на какие-нибудь
другие.
3. Поменяйте таким же образом значение для select. Обратите внимание, что значение, которое
будет присваиваться селекту, должно равняться значению одной из опций. Именно тогда селект сможет
подстроиться под это новое значение и выбрать нужную опцию.
👀
Вы должны увидеть на странице новые значения, измененные с помощью JavaScript, вместо значений,
которые были указаны в HTML разметке.
4. Измените значение св-ва src для картинки, присвоив адрес другой картинки.
5. Добавьте с помощью innerHTML div элемент, который будет содержать список, например:
const div = document.createElement("div")
div.innerHTML = '<ul id="technologies-list"><li>js</li><li>css</li></ul>'
document.body.append(div)
Браузер вставит эту строку как HTML, то есть распарсит его и "налету" создаст элементы, которые
будут полноценными тегами. Их можно будет найти с помощью document.getElementById и использовать.
6. Получите с помощь document.getElementById значение добавленного элемента.
💻
Попробуйте добавить другие элементы самостоятельно
7. Добавьте для кнопки осмысленный className. И определения для css класса, чтобы кнопка
действительно преобразилась, например:
- поменяла фон (
background-color)
- границу (
border)
- размер (
height, width)
- внутренние отступы (
padding)
- а также развернулась на 45 градусов (
transform: rotate(45deg))
Переходите к следующему заданию 🚀
Часть 2: Дополнительное задание
1. Создать html-страницу, типа персональная анкета:
(layout by Dimych)
2. Внутри тэга <script></script> написать код, который изменит значение каждого элемента на
другое.
3. Добавить этот код внутрь функции setTimeout:
setTimeout(function () {
// ВАШ КОД
}, 3000)
Данная функция нужна, чтобы отложить выполнение кода на N миллисекунд (в данном случае на 3000).
4. Попробуй искать элементы с помощью getElementsByClassName.
📚
Позволяет найти все элементы с заданным классом или классами среди дочерних.
Метод принимает один параметр — название класса или список классов в виде строки. Если передаёте
список классов, разделите их названия пробелами: class1 class2. Элемент подходит, если у него есть
все классы из перечисленных. Возвращаемое значение представляет собой HTMLCollection, проще говоря
— массив. Если ничего не найдено, вернет пустой массив.
Поскольку мы получим не один элемент, а массив, взаимодействие с найденными элементами будет
происходить иным образом. Массив — это "коробка" с одинаковыми элементами, лежащими по порядку. К
каждому элементу можно обратиться по индексу (начиная с 0).
Для того чтобы читать/изменять свойства потребуется достать нужный элемент из массива.
Пример с одним элементом массива:
// получаем значение
const classNames = document.getElementsByClassName("first-name-input")
// только один инпут имеет class="first-name-input"
console.log(classNames.length) // 1
// таким образом мы получим объект значений и методов элемента массива,
// в нашем случае, для элемента input
console.log(classNames[0])
// добавляем новый класс
classNames[0].className = classNames[0].className + " some-classname"
// получаем значение свойства className для элемента массива
console.log(classNames[0].className) // first-name-input default-input some-classname
Пример с несколькими элементами массива:
//получаем значение
const classNames = document.getElementsByClassName("default-input")
// все три инпута имеют class="default-input"
console.log(classNames.length) // 3
// добавляем новый класс
classNames[0].className = classNames[0].className + " some-classname"
console.log(classNames.length) // 3
// получаем значение свойства className для каждого элемента массива
console.log(classNames[0].className) // first-name-input default-input some-classname
console.log(classNames[1].className) // last-name-input default-input
console.log(classNames[2].className) // address-input default-input
5. Добавить кнопку, которая будет менять картинку при нажатии:
- добавить в HTML кнопку с
id
- по
id найти эту кнопку c помощью Javascript
- вызвать у этой кнопки метод
addEventListener
someButton.addEventListener("click", function () {
// ВАШ КОД
})
