<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.row {
display: flex;
flex-wrap: wrap;
}
.picture-block {
flex: 0 0 50%;
}
.picture-block__img {
width: 300px;
height: 400px;
}
.button.--active {
background: green;
}
</style>
</head>
<body>
<div class="row">
<div class="picture-block">
<img
class="picture-block__img"
src="https://klike.net/uploads/posts/2021-12/1638345229_2.jpg"
alt=""
>
<div class="picture-block__control">
<button
type="button"
class="button --active"
data-img="https://klike.net/uploads/posts/2021-12/1638345229_2.jpg"
>
left
</button>
<button
type="button"
class="button"
data-img="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwGZ9e0gkF00Cew42Qi2FjfZAUd7QNDp-6V0IjU-FR&s"
>
right
</button>
</div>
</div>
<div class="picture-block">
<img
class="picture-block__img"
src="https://klike.net/uploads/posts/2021-12/1638345229_2.jpg"
alt=""
>
<div class="picture-block__control">
<button
type="button"
class="button --active"
data-img="https://klike.net/uploads/posts/2021-12/1638345229_2.jpg"
>
left
</button>
<button
type="button"
class="button"
data-img="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwGZ9e0gkF00Cew42Qi2FjfZAUd7QNDp-6V0IjU-FR&s"
>
right
</button>
</div>
</div>
</div>
<script>
// Находим все кнопки
document.querySelectorAll('.button')
// Проходимся циклом по каждой
.forEach(btn => {
// Навешиваем на каждую слушатель, что бы при клике на кнопку срабатывала данная функция, можно повесить на родительский элемент и слушать клики внутри него
// что бы не искать родителя в changeImage где то на это есть статья в learnJS, найди сам, я забыл как называется влом искать.
btn.addEventListener('click', changeImage)
})
function changeImage(event) {
// Если кнопка активна и показывается это изображение, ничего не делаем, можно накинуть более конкретных проверок, например сравнивать url и т.д, но мне лень.
if (event.target.classList.contains('--active')) {
return
}
// event.target - кнопка по которой нажали - я как правило использую this и делаю все через ООП, но сейчас мне лень
// Корневой элемент
const parent = event.target.closest('.picture-block')
// Все кнопки управления
const controlButtons = parent.querySelectorAll('.button')
// Блок с картинкой для замены
const imgNode = parent.querySelector('.picture-block__img')
if (event.target.dataset.img) {
// подставим картинки
imgNode.src = event.target.dataset.img
// Удалим подсветку со всех кнопок
controlButtons.forEach(i => i.classList.remove('--active'))
// Добавим на нашу кнопку активный класс, для подсветки
event.target.classList.add('--active')
} else {
console.error('img not found')
}
}
</script>
</body>
</html>const fn
fn = foo === bar ? function() { alert(yes) } : function() { alert(no) }const selector = document.querySelector('#select')
function fn() {
... какой то твой код
// Удалить слушатель
selector.removeEventListener('change', fn)
}
// Повесить слушатель который вызовет функцию при изменении
selector.addEventListener('change', fn)// Получаем массив с объектами
const arr = localeStorage.getItem('foo')
// Ищем нужный объект по id
const item = arr.find(i => i.id === 1) // если работаем с объектами, помним, что мы получаем ссылку на объект
// Если находим, меняем какое то значение
if (item) item.key = 123123
// Записываем массив с измененными данными в localeStorage
localeStorage.setItem('foo', arr)<div v-html="serverString" class="container">const placeholders = document.querySelector(placeholder)
placeholderComponent.mount(placholder)const button = document.querySelector('кнопка в форме')
button.addEventListener('click', function(event) {
event.preventDefault()
// код для отправки формы.
})const Person = function (startName) {
let name = ''
const getName = function () {
return name
}
const setName = function (val) {
name = val
}
return {
setName, getName
}
}; // modify this function
const personModule = Person()
personModule.setName('Kotaro')
console.log(personModule.getName())fucntion click() {
let AboutMe = document.getElementById("AboutMe");
if (AboutMe.getAttribute('class') == 'mainbarBUTTONS')
AboutMe.setAttribute('class', 'mainbarBUTTONSpressed');
else if (AboutMe.getAttribute('class') == 'mainbarBUTTONSpressed')
AboutMe.setAttribute('class', 'mainbarBUTTONS');
}const swiperContainer = this.$el.querySelector('swiper')
const swiper = new Swiper(swiperContainer, {
speed: 400,
spaceBetween: 100,
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="level">
<div class="line">5%</div>
</div>
<button class="btn"></button>
</body>
</html>
<code lang="css">
.level {
width: 100%;
height: 50px;
background: #eee;
}
.line {
width: 10%;
height: 50px;
background: #ccc;
display: flex;
align-items: center;
justify-content: center;
transition: 0.3s;
}
.line.active1 {
transition: 0.3s;
width: 25%;
}
.btn {
width: 10%;
height: 20px;
background: red;
margin-top: 15px;
}
</code>let levelFull = document.querySelector('.line');
let levelBtn = document.querySelector('.btn');
let startPercent = 5
function progressActive() {
startPercent = startPercent + 25
if (startPercent > 100) startPercent = 100
levelFull.style.width = startPercent + '%'
levelFull.textContent = startPercent + ' %'
}
levelBtn.addEventListener('click', progressActive);document.getElementById('block').mousemove = function(e) {
if (e.which == 1) {} // Нажата левая кнопка мыши
if (e.which == 2) {} // Нажато колёсико мыши
if (e.which == 3) {} // Нажата правая кнопка мыши
}let cities = [];
function myGame() {
const input = document.getElementById('input_city');
const output = document.getElementById('output_city');
//Если массив пустой добавим 1е слово без всяких проверок.
if (!cities.length) {
console.log('Верно идем дальше');
cities.push(input.value);
input.value = ''
console.log(cities)
return
}
const lastCity = cities[cities.length - 1];
const lastLetter = lastCity[lastCity.length - 1];
const firstLetter = input.value.substr(0, 1); // первая буква слова
if (lastLetter.toLowerCase() === firstLetter.toLowerCase()) {
console.log('Верно идем дальше');
cities.push(input.value);
input.value = ''
} else {
console.log('Херня, давай сначала.')
}
console.log(cities);
}