Помогите пожалуйста с ревю кода javascript
Задание 1
Создайте HTML-документ, который в окне браузера отображается в виде следующих трёх строк:
• ДОСТУП К СВОЙСТВАМ И МЕТОДАМ.
• Коллекция all.
• Метод getElementById().
Первую строку поместите в контейнер <H2>...</h2>, вторую – в контейнер <P> …</p>, третью – в контейнер <DIV> … </div>. Напишите скрипт для изменения цветов фона и букв надписей при щелчке по этим строкам. При щелчке по первой строке цвет букв должен меняться с чёрного на белый или с белого на чёрный, а фон – с жёлтого на синий или с синего на жёлтый. Также должны меняться цвета третьей строки.
При щелчках по второй строке цвет букв на ней должен меняться с красного на белый и наоборот, а цвет фона – с белого на зелёный и наоборот.
Для изменения первой и третьей строк примените метод getElementById(), а для второй строки – коллекцию all
мое решение
<!DOCTYPE html>
<html>
<head>
<title>Interactive Text</title>
</head>
<body>
<h2 id="line1">ACCESS TO PROPERTIES AND METHODS.</h2>
<p id="line2">Collection of all.</p>
<div id="line3">getElementById() method.</div>
<script>
const line1 = document.getElementById('line1');
const line2 = document.getElementById('line2');
const line3 = document.getElementById('line3');
line1.addEventListener('click', () => {
toggleColors(line1);
toggleColors(line3);
});
line2.addEventListener('click', () => {
toggleColors(line2);
});
function toggleColors(element) {
if (element.style.color === 'black' || element.style.color === '') {
element.style.color = 'white';
element.style.backgroundColor = 'blue';
} else {
element.style.color = 'black';
element.style.backgroundColor = 'yellow';
}
}
</script>
</body>
</html>
верно ли моё решение? и если нет то что здесь нужно исправить?
заранее огромное спасибо за ответы
Ваше решение по смене цветов фона и текста вроде бы верно, но есть небольшая проблема: вы проверяете стиль (style) элемента, что может привести к проблемам. Рекомендуется использовать вычисленные стили (computed styles) для надежной проверки текущего цвета и фона. Вот исправленный код:
<!DOCTYPE html>
<html>
<head>
<title>Interactive Text</title>
</head>
<body>
<h2 id="line1">ACCESS TO PROPERTIES AND METHODS.</h2>
<p id="line2">Collection of all.</p>
<div id="line3">getElementById() method.</div>
<script>
const line1 = document.getElementById('line1');
const line2 = document.getElementById('line2');
const line3 = document.getElementById('line3');
line1.addEventListener('click', () => {
toggleColors(line1);
toggleColors(line3);
});
line2.addEventListener('click', () => {
toggleColors(line2);
});
function toggleColors(element) {
const currentColor = window.getComputedStyle(element).getPropertyValue("color");
const currentBackgroundColor = window.getComputedStyle(element).getPropertyValue("background-color");
if (currentColor === 'rgb(0, 0, 0)' || currentColor === '') {
element.style.color = 'white';
element.style.backgroundColor = 'blue';
} else {
element.style.color = 'black';
element.style.backgroundColor = 'yellow';
}
}
</script>
</body>
</html>
Использование window.getComputedStyle() позволяет корректно получать текущие вычисленные стили элемента для проверки и изменения.