Javascript ile çoklu seçim nasıl yapılır?
Kolay gelsin arkadaşlar. Bir sorum var. Yanyana üç daire koydum. 150px*150px boyutunda. Hangisine tıklarsam o div'in rengi değişecek. Mesela 2. ye tıkladım yeşil oldu. 1. ye tıkladım yeşil oldu. 1. tekrar tıkladım yeşil rengi gitti gibi. Ben aşağıdaki kodlarla yapmaya çalıştım ama yapamadım.
<div class="yuvarlakdiv">
<div class="gridver">
<div id="yuvarlakidver" class="yuvarlaklar">
1
</div>
<div id="yuvarlakidver" class="yuvarlaklar">
2
</div>
<div id="yuvarlakidver" class="yuvarlaklar">
3
</div>
</div>
</div>
var ekle = document.querySelectorAll(".yuvarlaklar");
document.addEventListener('click', veri);
function veri() {
ekle.style.background = "red";
}
İlk olarak şöyle bir hatan var id attribute'u unique yani benzersiz olmalı. id birden fazla html elementine verilmemeli. Senin tc kimliğin aslında bu ülkede id'indir. Bunu html içinde uygulamalısın.
Burdan sonra yapacağın şey şu
const elements = document.querySelectorAll(".yuvarlaklar");
elements.forEach(element => element.addEventListener("click",(e) => e.target.classList.toggle("active")))
//Her bir yuvarlaklar classına sahip elemana click eventi verdik ve bu event tıklandığında active classını varsa siler yoksa ekler
.active{
background-color:green;
}