Необходимо, чтобы при клике на упаковку и после отведения курсора мыши с упаковки менялся цвет границ упаковки .И так же снова убирался

Question

Написать скрипты желательно на чистом Js.Пример HTML и JS кода приложу. ссылку на анимацию готовую другого человека тоже приложу.(https://nikitanpl.github.io/test-task-funbox)

Я написал пару функций на js , но когда они отрабатывают , у меня при повторном клике на упаковку и отводе курсора с нее, скрипты не работают почему -то , пока я заново не обновлю страницу, что с этим можно сделать ?

HTML-код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Funboxtets</title>
    <link rel="stylesheet" href="css/bootstrap-reboot.min.css">
    <link rel="stylesheet" href="css/fonts.css">
    <link rel="stylesheet" href="css/style.min.css">
</head>
<body>
    <div class="promo">
        <h1>Ты сегодня покормил кота ?</h1>
        <div class="promo__wrapper">
            <div class="promo__item" id="item">
                <div class="promo__item-title">
                    <div class="corner" id="corner"></div>
                    <div class="text" id="text">
                        <div class="text__block">Сказачное заморское явство</div>
                    </div>
                </div>
                <div class="promo__info" id="info">
                    <div class="promo__block">
                        <h2>Нямушка
                            <span>с фуа-гра</span>
                        </h2>
                        <div class="promo__descr">10 порций<br>мышь в подарок</div>
                    </div>
                    <div class="promo__image">
                        <img src="img/cat.png" alt="cat">
                    </div>
                    <div class="promo__weight" id="weight">
                        <span>0,5</span>
                        <span class="fs">кг</span>
                    </div>
                </div>
                <div class="promo__subtext" id="subtext">
                    Чего сидишь? Порадуй котэ, <span id="click">купи.</span>
                </div>
                <div class="promo__subdescr_hidden" id="subdescr">
                    Печень утки разварная с артишоками.
                </div>
            </div>
            <div class="promo__item"></div>
            <div class="promo__item"></div>
        </div>
    </div>
    
<script src="js/script.js"></script>
</body>
</html>

JS-код(я новичок еще):

let item = document.getElementById('item');
let el1 = document.getElementById('corner');
let el2 = document.getElementById('text');
let el3 = document.getElementById('info');
let el4 = document.getElementById('weight');
let el5 = document.getElementById('click');
let subtext = document.getElementById('subtext');
let subdescr = document.getElementById('subdescr');
item.addEventListener('mouseover', changeBordersHover);
item.addEventListener('mouseout', changeBordersHover);
item.addEventListener('click', changeBordersSelectedClick);

 


function changeBordersHover(){
    if(el1.className === 'corner' && el2.className === 'text' && el3.className === 'promo__info' && el4.className === 'promo__weight'){
        el1.classList.add('corner_hover');
        el2.classList.add('text_hover');
        el3.classList.add('promo__info_hover');
        el4.classList.add('promo__weight_hover');
        
    } else {
        el1.classList.remove('corner_hover');
        el2.classList.remove('text_hover');
        el3.classList.remove('promo__info_hover');
        el4.classList.remove('promo__weight_hover');
    }
}


function changeBordersSelectedClick(){
    item.addEventListener('mouseout', changeBordersSelected);
    function changeBordersSelected(){
        el1.classList.add('corner_selected');
        el2.classList.add('text_selected');
        el3.classList.add('promo__info_selected');
        el4.classList.add('promo__weight_selected');
        subtext.className = 'promo__subtext_hidden';   
        subdescr.className = 'promo__subdescr';
        
    };
    item.addEventListener('click', changeBordersSelectedRepeatClick);
    function changeBordersSelectedRepeatClick(){
        item.addEventListener('mouseout', changeBordersSelectedNone);
    }
    function changeBordersSelectedNone(){
        el1.classList.remove('corner_selected');
        el2.classList.remove('text_selected');
        el3.classList.remove('promo__info_selected');
        el4.classList.remove('promo__weight_selected');
        subtext.className = 'promo__subtext';   
        subdescr.className = 'promo__subdescr_hidden';

    };
    
    

}

el5.onclick = function clickChangeBorders(){
    el1.classList.add('corner_selected');
    el2.classList.add('text_selected');
    el3.classList.add('promo__info_selected');
    el4.classList.add('promo__weight_selected');
    subtext.className = 'promo__subtext_hidden';   
    subdescr.className = 'promo__subdescr';
}

БЛОГ НА HUSL

Необходимо, чтобы при клике на упаковку и после отведения курсора мыши с упаковки менялся цвет границ упаковки .И так же снова убирался

Ответы (0 шт):