2 Reihen ratio-btn, eine Reihe funktioniert andere nicht

[Saager]

<p class="product-sub-heading-length">Länge</p>
<input type="radio" name="length" value="s" checked hidden id="s-length">
<label for="s-length" class="length-radio-btn check">s</label>
<input type="radio" name="length" value="m" hidden id="m-length">
<label for="m-length" class="length-radio-btn">m</label>
<input type="radio" name="length" value="xl" hidden id="xl-length">
<label for="xl-length" class="length-radio-btn">xl</label>

<p class="product-sub-heading-broad">Breite</p>
<input type="radio" name="broad" value="14" checked hidden id="14-broad">
<label for="14-broad" class="broad-radio-btn check">14</label>
<input type="radio" name="broad" value="16" hidden id="16-broad">
<label for="16-broad" class="broad-radio-btn">16</label>
<input type="radio" name="broad" value="18" hidden id="18-broad">
<label for="18-broad" class="broad-radio-btn">18</label>
<input type="radio" name="broad" value="19" hidden id="19-broad">
<label for="19-broad" class="broad-radio-btn">19</label>
<input type="radio" name="broad" value="20" hidden id="20-broad">
<label for="20-broad" class="broad-radio-btn">20</label>

//product.css
.length-radio-btn{
display: inline-block;
width: 80px;
height: 80px;
text-align: center;
font-size: 20px;
border: 1px solid #383838;
border-radius: 50%;
margin: 10px;
margin-left: 0;
line-height: 80px;
text-transform: uppercase;
color: #383838;
cursor: pointer;
}

.length-radio-btn.check{
background: #383838;
color: #fff;
}

.btn{
width: 48%;
padding: 20px;
border-radius: 5px;
background: none;
border: 1px solid #383838;
color: #383838;
font-size: 20px;
cursor: pointer;
margin: 20px 0;
text-transform: capitalize;
}

.product-sub-heading-broad{
font-size: 30px;
text-transform: uppercase;
margin: 60px 0 10px;
font-weight: 300;
}

.broad-radio-btn{
display: inline-block;
width: 80px;
height: 80px;
text-align: center;
font-size: 20px;
border: 1px solid #383838;
border-radius: 50%;
margin: 10px;
margin-left: 0;
line-height: 80px;
text-transform: uppercase;
color: #383838;
cursor: pointer;
}

.broad-radio-btn.check{
background: #383838;
color: #fff;
}

.btn{
width: 48%;
padding: 20px;
border-radius: 5px;
background: none;
border: 1px solid #383838;
color: #383838;
font-size: 20px;
cursor: pointer;
margin: 20px 0;
text-transform: capitalize;
}


//product.js
const productImages = document.querySelectorAll(".product-images img");
const productImageSlide = document.querySelector(".image-slider");

let activeImageSlide = 0;

productImages.forEach((item, i) => {
item.addEventListener('click', () =>{
productImages[activeImageSlide].classList.remove('active');
item.classList.add('active');
productImageSlide.style.backgroundImage = url('${item.src}');
activeImageSlide = i;
});
});

// toggle lenght buttons

const lengthBtns = document.querySelectorAll('.lenght-radio-btn');
let checkedBtn = 0;

lengthBtns.forEach((item, i) => {
item.addEventListener('click', () => {
lengthBtns[checkedBtn].classList.remove('check');
item.classList.add('check');
checkedBtn = i;
})
})
// toggle broad buttons

const broadBtns = document.querySelectorAll('.broad-radio-btn');
let checkedBtn = 0;

broadBtns.forEach((item, i) => {
item.addEventListener('click', () => {
broadBtns[checkedBtn].classList.remove('check');
item.classList.add('check');
checkedBtn = i;
});
});

 

[KonradN]

a) Code bitte immer in Code-Tags - also am einfachsten über den Knopf </> links oberhalb des Eingabebereichs.
b) Bitte immer eine möglichst genau Beschreibung des Problems. Was heisst denn "funktioniert nicht"?

Und noch der Hinweis: Dieses Forum ist für Java - wir jaben auch ein Unterforum für HTML. /JavaScript / CSS.

 

[Oneixee5]

Die Klasse heißt length-radio-btn nicht lenght-radio-btn

 

[Saager]

danke für die tipps
leider funktionieren die Btn nicht

const productImages = document.querySelectorAll(".product-images img");
const productImageSlide = document.querySelector(".image-slider");

let activeImageSlide = 0;

productImages.forEach((item, i) => {
    item.addEventListener('click', () =>{
        productImages[activeImageSlide].classList.remove('active');
        item.classList.add('active');
        productImageSlide.style.backgroundImage = `url('${item.src}')`;
        activeImageSlide = i;
    });
});

// toggle pinbuckle buttons

const pinbuckleBtns = document.querySelectorAll('.pinbuckle-radio-btn');
let checkedBtn = 0;

pinbuckleBtns.forEach((item, i) => {
    item.addEventListener('click', () => {
        pinbuckleBtns[checkedBtn].classList.remove('check');
        item.classList.add('check');
        checkedBtn = i;
    });
});

// toggle lenght buttons

const lengthBtns = document.querySelectorAll('.length-radio-btn');
let checkedBtn = 0;

lengthBtns.forEach((item, i) => {
    item.addEventListener('click', () => {
        lengthBtns[checkedBtn].classList.remove('check');
        item.classList.add('check');
        checkedBtn = i;
    })
})
// toggle broad buttons

const broadBtns = document.querySelectorAll('.broad-radio-btn');
let checkedBtn = 0;

broadBtns.forEach((item, i) => {
    item.addEventListener('click', () => {
        broadBtns[checkedBtn].classList.remove('check');
        item.classList.add('check');
        checkedBtn = i;
    });
});

 

[Oneixee5]

checkedBtn wird mehrfach deklariert. let ist abhängig vom Scope, var hat keinen so eingeschränkten Scope.

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsfiddle.net