v2.5.2
Giriş yap

Javascript ile çoklu seçim nasıl yapılır?

yazilimyolcusu
231 defa görüntülendi
6

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";
}
javascript
Cevap yaz
Cevaplar (6)
yazilimyolcusu
340 gün önce

Merhaba. Bu kodu arrow fonkisyon şeklinde değil de, function şeklinde nasıl yazabilirdik? Mantığını anlamak için soruyorum. Şu şekilde gibi mesela. Mantığını anlayamadığım için yapamadım.

elements.forEach(element => element.addEventListener("click",(e) => e.target.classList.toggle("active")))

elements.forEach(element) {
    function() {
        element.addEventListener("click",e);
        function e() {
            e.target.classList.toggle("active");
        }
    }
}
0
#013075
yazilimyolcusu
339 gün önce

Bu sorunun devamı olarak bir soru daha soracaktım. Bir kutuya tıklıyorum. Kutunun arkaplanı yeşil oluyor ve o kutunun değeri yazıyor. 1. kutuya tıkladıysam aşağısında "1" yazıyor. 2. kutuya tıkladıysam aşağısında "2" yazıyor. Şimdi, tıkladığım kutuya tekrar tıklayınca o değer kaybolsun. Nasıl yapılabilir? Kodlar aşağıda.

    var listItems = document.querySelectorAll("#ee");
    const elements = document.querySelectorAll(".yuvarlaklar");
    
    elements.forEach(function(element) {
        element.addEventListener("click", function(e) {
            e.target.classList.toggle("active");

            listItems = document.createElement("li");
            document.getElementById("ee").appendChild(listItems);
            listItems.innerHTML = element.innerHTML;
        })
    })
0
#013080
yazilimyolcusu
340 gün önce

Kodda "e" yi koymamışsınız, ekleyince çalıştı. Ben uğraştım 1.5 saat, yapamamıştım. Şimdi oldu.

0
#013078
devepdogukan
340 gün önce

Tabi normal fonksiyon ile


elements.forEach(function(element){
  element.addEventListener("click", function(){
    this.target.classList.toggle("active")
   })
 }
)
0
#013077
yazilimyolcusu
340 gün önce

devepdogukan'ın cevabına doğru diyeceğime kendi cevabıma doğru işaretledim. Düzeltebilirseniz sevinirim.

0
#013076
devepdogukan
340 gün önce

İ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;
}
1
#013074