Что я тут сделал не так? Почему кастомный селект не выбирает вариант "Русский"?

Question

Написал кастомный селект. Нашел в интернете, пару часов переделываю под себя. Уже почти рабочий, но русский не выбирается. Почему?

let select_current = document.querySelector(".select_current");
let sel_body = document.querySelector(".select_body");
let sel_item = document.querySelector(".select_item");
let sel_input = document.querySelector(".select_input");
select_current.addEventListener("click", (event)=>{
    sel_body.classList.toggle("is_active");
})
let a = new Array(sel_item);
a.forEach(elem => {
    elem.addEventListener("click", ()=>{
        let elemValue = elem.getAttribute("data-value");
        let elemText = elem.textContent;
        sel_input.value = elemValue;
        select_current.textContent = elemText;
        selectBodyHide();
    })
})

let selectBodyHide = () =>{
    sel_body.classList.remove("is_active");
};
//сделал моусап
document.addEventListener("mouseup", (e)=>{
    if (!select_current.contains(e.target)) selectBodyHide();
})

.select{
    display: flex;
    font-family: "Circe";
    font-size: 16px;
    line-height: 21px;
    color: white;
}
.select_header{
    display: flex;
    cursor: pointer;
}
.select_current{
    padding: 8px;
}
.select_body{
    display: none;
    flex-direction: column;
    border-top:0;
    position: absolute;
    margin-top: 40px;
}
body{
    background:rgba(0,0,0,0.5); 
}
.select_item{
    line-height: 24px;
    padding: 8px;
    font-size: 16px;
}
.select_item:hover, .select_current:hover{
    box-shadow: 0 0 10px white;
    cursor:pointer;
}
.is_active{
    display:flex;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="css.css">
</head>
<body>
    <div class="select">
                <input type="hidden" name="number" class="select_input">
                <div class="select_header">
                    <div class="select_current">Русский</div>
                </div>
                <div class="select_body">
                    <div class="select_item" data-value="English">English</div>
                    <div class="select_item" data-value="Russian">Русский</div>
                </div>
            </div>
   <script src="js.js"></script>    
</body>
</html>

Answer 1

let select_current = document.querySelector(".select_current");
let sel_body = document.querySelector(".select_body");
let sel_item = document.querySelectorAll(".select_item");
let sel_input = document.querySelector(".select_input");
select_current.addEventListener("click", (event)=>{
    sel_body.classList.toggle("is_active");
})
//let a = new Array(sel_item);
sel_item.forEach(elem => {
    elem.addEventListener("click", ()=>{
        let elemValue = elem.getAttribute("data-value");
        console.log(elemValue);
        let elemText = elem.textContent;
        sel_input.value = elemValue;
        select_current.textContent = elemText;
        selectBodyHide();
    })
})

let selectBodyHide = () =>{
    sel_body.classList.remove("is_active");
};
//сделал моусап
document.addEventListener("mouseup", (e)=>{
    if (!select_current.contains(e.target)) selectBodyHide();
})

.select{
    display: flex;
    font-family: "Circe";
    font-size: 16px;
    line-height: 21px;
    color: white;
}
.select_header{
    display: flex;
    cursor: pointer;
}
.select_current{
    padding: 8px;
}
.select_body{
    display: none;
    flex-direction: column;
    border-top:0;
    position: absolute;
    margin-top: 40px;
}
body{
    background:rgba(0,0,0,0.5); 
}
.select_item{
    line-height: 24px;
    padding: 8px;
    font-size: 16px;
}
.select_item:hover, .select_current:hover{
    box-shadow: 0 0 10px white;
    cursor:pointer;
}
.is_active{
    display:flex;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="css.css">
</head>
<body>
    <div class="select">
                <input type="hidden" name="number" class="select_input">
                <div class="select_header">
                    <div class="select_current">Русский</div>
                </div>
                <div class="select_body">
                    <div class="select_item" data-value="English">English</div>
                    <div class="select_item" data-value="Russian">Русский</div>
                    <div class="select_item" data-value="American">American</div>
                </div>
            </div>
   <script src="js.js"></script>    
</body>
</html>

БЛОГ НА HUSL

Что я тут сделал не так? Почему кастомный селект не выбирает вариант "Русский"?

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