Touchend in een loop?

Door Bryan De Baar op 06-03-2019 12:16

1.815 views

Hallo,

Voor touch devices wil ik een functie maken als de touchscreen word losgelaten. Deze functie is voor meerderen elementen.
De elementen heb ik in een loop gezet maar de code haalt niets uit. Als ik de touch functie weg haal dan werkt het wel.
Hoe kan ik een touchend op meerdere elementen zetten zonder voor elk element een functie aan te maken?


var elements = document.querySelectorAll('.hamburgermenu,.phone,.shoppingbag');
		elements.ontouchend = function(){
			for (var i = 0; i < elements.length; i++) {
    			elements[i].style.color = "#af7aa5";
			}
		}

Rob Doemaarwat

06-03-2019 13:07

Volgens mij haal je jQuery en plain JavaScript door elkaar:
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
(dus elements.forEach(), enz)

Bryan De Baar

06-03-2019 19:03

De queryselector is toch ook plain Javascript?

Yoeri Achterbergen

06-03-2019 19:41

OPGELOST

Gebruikt gemaakt 'this' in de loop


var elements = document.querySelectorAll('.hamburgermenu,.phone,.shoppingbag');
		for(var i =0; i< elements.length; i++){
			elements[i].ontouchend = function(){ 
            	              this.style.color = '#fff';
        	        }
	        }

Rob Doemaarwat

06-03-2019 20:50

Ik hoop dat je ook snapt wat je werkelijk gedaan hebt: je itereert nu eerst over de elementen en hangt er dan (binnen de for loop) een event handler aan (dus per element). Voorheen hing je de handler aan "de elementen" (dat kan - maar het doet niks), en vervolgens ging je binnen die handler over de elementen heen loopen (maar dat deed dus niks, want de handler werd gewoon nooit aangeroepen).

Reageren

Inloggen om te reageren