Как сделать, чтобы при клике на div менялся цвет бордера на чистом JavaScript?

Question

[osimone]

Не могу в js сделать так, чтобы при клике на упаковку менялся цвет бордера с синего на допустим красный, и обратно с красного на синий при повторном клике

<div class="cards">
                    <div class="product">
                        <div class="product__tabs">
                            <div class="card">
                                <div class="card__descr">
                                    <div class="card__cansel">Котэ не одобряет?</div>
                                    <div class="card__label">Сказочное заморское яство</div>
                                    <div class="card__title">Нямушка</div>
                                    <div class="card__subtitle">с фуа-гра</div>
                                    <div class="card__specs">
                                        <span class="card__specs-num">10</span> порций
                                        <br>мышь в подарок</div>
                                    <div class="card__weight">
                                        <div class="card__weight-count">0,5</div>
                                        <div class="card__weight-subcount">кг</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="info">
                            <div class="info__buy">Чего сидишь? Порадуй котэ,
                                <a href="#" class="info__buy-link">купи.</a>
                            </div>
                            <div class="info__descr">Печень утки разварная с артишоками.</div>
                        </div>
                    </div>

.cards {
    display: flex;
    justify-content: center;
}
.card {
    margin-top: 40px;
    position: relative;
    width: 320px;
    height: 480px;
    clip-path: polygon(10% 0, 100% 0, 100% 5%, 100% 100%, 80% 100%, 0 100%, 0% 80%, 0 5%);
    border-radius: 10px;
    border: 4px solid $main-color;
    background: url(../img/cat.png) #f2f2f2 no-repeat;
    background-position: bottom;
    cursor: pointer;
    &::before{
        display: block;
        z-index: 2;
        transform-origin: 22% 200%;
        -webkit-transform: rotate(-37deg);
        -ms-transform: rotate(-37deg);
        transform: rotate(-37deg);
        content: '';
        width: 100px;
        border: 4px solid $main-color;
    }
    &__descr {
        margin-left: 40px;
    }
    &__cansel {
        display: none;
        font-family: TrebuchetMS;
        margin-top: 10px;
        font-size: 16px;
        font-weight: 400;
        color: $active-color;
    }
    &__label {
        font-family: TrebuchetMS;
        font-size: 16px;
        margin-top: 10px;
        font-weight: 400;
        color: #666666;
    }
    &__title {
        font-family: TrebuchetMS;
        font-size: 48px;
        margin-top: 10px;
        font-weight: 700;
        color: #000000;
    }
    &__subtitle {
        font-family: TrebuchetMS;
        font-size: 24px;
        // margin-top: 3px;
        font-weight: 700;
        color: #000000;
    }
    &__specs {
        font-family: TrebuchetMS;
        margin-top: 10px;
        font-size: 14px;
        line-height: 16px;
        font-weight: 400;
        color: #666666;
        &-num {
            font-family: TrebuchetMS;
            font-size: 14px;
            line-height: 16px;
            font-weight: 700;
            color: #666666;
        }
    }
    &__weight {
        padding-top: 14px;
        width: 80px;
        height: 80px;
        font-family: 'Trebuchet MS', sans-serif;
        font-size: 42px;
        text-align: center;
        color: #fff;
        background-color: $main-color;
        border-radius: 50%;
        position: absolute;
        right: 10px;
        bottom: 15px;
        &-count {
            font-family: TrebuchetMS;
            margin-top:7px;
            font-size: 42px;
            line-height: 22px;
            font-weight: 400;
            color: #ffffff;
        }
        &-subcount {
            font-family: TrebuchetMS;
            margin-top: 7px;
            font-size: 21px;
            line-height: 22px;
            font-weight: 400;
            color: #ffffff;
        }
    }
}
.info {
    margin-top: 15px;
    &__buy {
        text-align: center;
        font-family: TrebuchetMS;
        font-size: 13px;
        line-height: 16px;
        font-weight: 400;
        color: #ffffff;
        &-link {
            font-weight: bold;
            font-size: 13px;
            text-decoration: none;
            color: $main-color;
            border-bottom: 1px dashed $main-color;
        }
    }
    &__descr {
        display: none;
        text-align: center;
        font-family: TrebuchetMS;
        font-size: 13px;
        line-height: 16px;
        font-weight: 400;
        color: #ffffff;
    }
    &__error {
        display: none;
        text-align: center;
        font-family: TrebuchetMS;
        font-size: 13px;
        line-height: 16px;
        font-weight: 400;
        color: #ffffff;
        color: #ff6;
    }
}
.hide {
    display: none;
}
.show {
    display: block;
}
.card-active {
    margin-top: 40px;
    position: relative;
    width: 320px;
    height: 480px;
    clip-path: polygon(10% 0, 100% 0, 100% 5%, 100% 100%, 80% 100%, 0 100%, 0% 80%, 0 5%);
    border-radius: 10px;
    border: 4px solid $active-color;
    background: url(../img/cat.png) #f2f2f2 no-repeat;
    background-position: bottom;
    cursor: pointer;
    &::before{
        display: block;
        z-index: 2;
        transform-origin: 22% 200%;
        -webkit-transform: rotate(-37deg);
        -ms-transform: rotate(-37deg);
        transform: rotate(-37deg);
        content: '';
        width: 100px;
        border: 4px solid $active-color;
    }
}

Answer 1

[Loli E1ON]

document.querySelector(".cards").addEventListener("click", ({ target }) => target.closest('.card')?.classList.toggle('card-active'));

Comments

[osimone]

подскажите, а как сделать чтобы при клике на card удалялся класс info__buy и вместо добавлялся info__descr. и наоборот. классы info__buy и info__descr находятся снаружи класса card

[Loli E1ON]

osimone, просто тоглить классы? или скрывать блоки?

[osimone]

Loli E1ON, если честно не знаю как правильнее, когда первый раз на card кликают должен удалиться класс card__info

<div class="info__buy">Чего сидишь? Порадуй котэ,
                                <a href="#" class="info__buy-link">купи.</a>
                            </div>

и вместо него на странице под упаковкой должен появиться класс card__descr (я его поставил в дисплей нон)

<div class="info__descr">Печень утки разварная с артишоками.</div>

и чтобы при повторном клике на этот же card снова удалился текст с класса card__descr и добавлялся текст с класса card__info

[osimone]

дико извиняюсь не card__info а info__buy и info__descr

[osimone]

что то мне подсказывает что у класса info__buy просто можно поменять текст при клике на card, вот как это реализовать пока не получается)

[Loli E1ON]

[osimone]

Loli E1ON, большое спасибо! работает