onclick dla paru przycisków

0

Cześć. Stworzyłem krótki skrypt w jQuery który po wybraniu odpowiedniego przycisku z 4 możliwych ustawia border-bottom i dodaje go bądź usuwa z poprzedniego. Chcę zrobić to samo w czystym javascripcie, ponieważ przeczytałem że dla manipulacji DOM jest to 'optymalniejsze'.

Problem polega na tym że nie mogę wykryć wciśnięcia przycisku, ponieważ zawsze pokazuję mi element 4 który nie istnieje.

Działający w jquery:

        var elements = document.querySelectorAll('div#buttonColors > a');
        $(elements).on('click', function () {
            $('.selected').removeAttr('style').removeClass('selected');
            $(this).css('border-bottom', 'coral solid 1px').addClass('selected');
        }); 

Nie działający w javascripcie:

    var elements = document.getElementById("buttonColors").getElementsByTagName("a"); // elements.length = 4

    for (var i = 0; i < elements.length; i++) {
        elements[i].addEventListener("click",
            function() {
                //document.getElementById(elements[i]).style.border = '1px solid cor al';
                console.log(i); // 4

            });
    } // !..

Prosiłbym o jakąś wskazówkę. :)

0
function() {
                this.style.border = '1px solid coral';
            });
0

Ja bym to inaczej zrobiił:

     var btn = document.querySelectorAll('#box>input');

    for (let i = 0; i < btn.length; i++) {
        btn[i].addEventListener('click', function () {
            btn[i].classList.toggle('example');
        });
    }
0
stivens napisał(a):
function() {
                this.style.border = '1px solid coral';
            });

Tak to działa tylko ja chcę złapać konkretny guzik. Jak daje console.log(elements[i]) po wciśnięciu pierwszego lepszego to mam undefined.

0

Dobrze pobrałeś elementy z dokumnetu HTML?

0

this.style.border = '1px solid coral'; --> działa

nie działa w taki sposób jak elements[i].style.border = "1 px solid coral';

        var elements = document.getElementById("buttonColors").getElementsByTagName("a");
        console.log(elements);

        for (var i = 0; i < elements.length; i++) {
            elements[i].addEventListener("click",
                function () {
                    console.log(elements[i]);
                });
        }

http://qs.lc/5epzk --> elements
elements[i] --> undefined

0

Zamiast var daj let.

0

Dziwne
http://screenshot.sh/mE6BgwZLIN20t

daj console.log(elements) i console.log(i)

0

console.log(i) wychodzi 4 co jest niemożliwe bo przecież warunek pętli blokuje to, a console.log(elements) jest na górze ze screenem.

Myślę że to pomoże:

https://jsbin.com/qoyoliliso/edit?html,js,console,output

Krew mnie zalewa.

1

Chodziło mi o zamianę w tej części kodu ;)

        for (let i = 0; i < elements.length; i++) {
            elements[i].addEventListener("click",
                function () {
                    console.log(elements[i]);
                    console.log(i);
                });
        } 
0

Spróbuj czegoś takiego:

   for (var i = 0; i < elements.length; i++) {
            (function(x) {
            elements[x].addEventListener("click",
                function () {
                 //...
                });
           })(i);
        } 
 
0

Nie wiem czy już rozwiązałeś swój problem, ale może spróbuj tego:

 let elements = document.querySelectorAll('div#buttonColors > a');

for (let element of elements) {
	element.addEventListener('click', (event) => {
		event.targetElement.style.borderBottom = '1px solid coral';
		event.targetElement.classList.add('selected');
	});
}

1 użytkowników online, w tym zalogowanych: 0, gości: 1