v2.5.2
Giriş yap

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

yazilimyolcusu
298 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>
HTML
var ekle = document.querySelectorAll(".yuvarlaklar");
document.addEventListener('click', veri);
function veri() {
    ekle.style.background = "red";
}
JavaScript
devepdogukan
445 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 
JavaScript

.active{
    background-color:green;
}

CSS