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ę. :)