Как изменить img с помощью JavaScript с помощью переключателя и регистра переключателя? - PullRequest
Новая
       11

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

0 голосов
/ 21 ноября 2018

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

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

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 Ответ

0 голосов
/ 21 ноября 2018

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


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

Пример: 

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