Как изменить img с помощью JavaScript с помощью переключателя и корпуса переключателя?

Я хочу иметь фоновое изображение в зависимости от проверенного переключателя, используя корпус переключателя. Однако я не нахожу правильное решение, чтобы получить значение с проверенного переключателя.

Фрагмент моего кода:

HTML:

<section class="configurator__product">
       ...
</section>

<label for="blue" class="hidden">Blue</label>
<input type="radio" id="blue" name="color-totebag" value="tote-blue" class="circle tote-blue">
<label for="green" class="hidden">Green</label>
<input type="radio" id="green" name="color-totebag" value="tote-green" class="circle tote-green">
<label for="black" class="hidden">Black</label>
<input type="radio" id="black" name="color-totebag" value="tote-black" class="circle tote-black">

Есть больше входных данных, всего 5, поэтому причина, по которой я не думаю, что использование if / else является необязательным. Но я надеюсь, что это станет понятным с объемом кода, который я здесь даю.

JavaScript:

const changeTotebagColor = () => {
    let totebagColor = document.getElementsByName(`color-totebag`).value;
    const $totebagImg = document.querySelector(`.configurator__product`);

    switch (totebagColor) {
        case `tote-blue`:
            $totebagImg.style.backgroundImage = "url('assets/img/totebag_blue')";
        case `tote-green`:
            $totebagImg.style.backgroundImage = "url('assets/img/totebag_green')";
        case `tote-black`:
            $totebagImg.style.backgroundImage = "url('assets/img/totebag_black')";
    }
}

changeTotebagColor();

Надеюсь, это немного ясно, что я пытаюсь понять. Я новичок в JavaScript, так что, возможно, я делаю все это неправильно. Я пробовал множество решений в Интернете, но мне не повезло. Я также хотел бы избежать встроенного JavaScript, если это возможно, но я открыт для любого решения на данный момент.

Всего 1 ответ


Как я упоминал в своем комментарии, как все настроено, вы фактически не стреляете в свою функцию, когда вы нажимаете на вещи. Вы называете это после функции, но это не «наблюдает» за вещами.


Вы можете решить это несколькими способами. Проще всего было бы (не переходить на jquery или другое и оставлять ваши ванильные js в одиночку), чтобы просто применить onclick к вашим радиоприемникам.

Пример:

 <input type="radio" onclick="changeTotebagColor()" id="blue" name="color-totebag" value="tote-blue" class="circle tote-blue">

Есть идеи?

10000