v2.5.2
Giriş yap

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

yazilimyolcusu
125 defa görüntülendi

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";
}
yazilimyolcusu
119 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;
        })
    })