Estoy tratando de ordenar una matriz en un evento de cambio aplicado a un botón, pero parece que nunca entro en este detector de eventos.

¿Cuál podría ser posiblemente el problema? Gracias por adelantado

 <div class="sort"> <button class="sorting" value="popular"><span class="sortby">Popular</span></button> <div class="choices"> <button class="choice" value="popular">Popular</button> <button class="choice" value="date">Date</button> <button class="choice" value="title">Title</button> </div> </div>

 const photos = ["abc", "def", "abf", "abdc", "152"] const sortBtn = document.querySelector(".sorting") const sortBy = document.querySelector(".sortby") const choices = document.querySelector(".choices") const singleChoice = document.querySelectorAll(".choice") singleChoice.forEach((choice, index) => { //click on a choice choice.addEventListener("click", () => { sortBtn.value = choice.value sortBy.textContent = choice.value console.log("sortbutton value",sortBtn.value) //Onchange sort sortBtn.addEventListener("change", () => { if(sortBtn.value == "date") { photos.sort() console.log(photos) } }) }) })