JavaScript - Detectar Click en una Galería de Fotos y Descripciones

var ar_coins = document.getElementsByClassName('arti');

    for( xx=0;xx < ar_coins.length;xx++){

	ar_coins[xx].addEventListener("click",cosa(),false);

   }

function cosa(){

alert(ar_coins[xx].textContent + '   ' + xx);

}

<script>

function galery(e) {

	bbb=document.getElementById("response-container");

	if (e.classList.length == 0)

		e.classList.add("select")

	else

		e.classList.remove("select")

}

</script>

<script>

function prueba(e){

   var nodoSpan = document.getElementsByClassName('arti');

   var msg = 'Primer for \n';

   for (var i=0; i< nodoSpan.length; i++) { msg = msg + i + ': contiene ' +nodoSpan[i].textContent + ' , y nodeValue '+nodoSpan[i].firstChild.nodeValue +'  ** \n'; }

   msg = 'Segundo for \n';

   for (var i=0; i< nodoSpan.length; i++) { msg = msg + i + ': contiene ' +nodoSpan[i].innerText + '** \n'; }

   msg = 'Tercer for \n';

   for (i in nodoSpan) { msg = msg + i + ': contiene ' + nodoSpan[i].textContent + ' -- \n'; }

   //****************************************************************************

   var ar_coins = document.getElementsByClassName('arti');

  alert(ar_coins.length);

    for( xx=0;xx < ar_coins.length;xx++){

           alert('una   ' + xx);

	ar_coins[xx].addEventListener("click",cosa(),false);

   }

   function cosa(){

    alert(ar_coins[xx].textContent + '   ' + xx);

  }

}

</script>

<script>

function texty(e) {

	eee=$(e.currenttarget).click("#response-container").index();

	alert(eee + " - 123 " );

	bbb=document.getElementById("response-container")

	ccc=bbb.textContent;

	ccc=$(this).index()

	if (e.classList.length == 0)

		e.classList.add("select")

	else

		e.classList.remove("select")

	a=a

}

</script>

<section>

<div id="response-container"></div>

</section>

$(document).ready(function(){

	var getdetails = function(marca){

		return $.getJSON( "css/consultas.php", { "marca" : marca });

	}

	$('[data-user]').click(function(e){

		e.preventDefault();

		$("#response-container").html("<p>Buscando...</p>");

		getdetails($(this).data('user'))

			.done( function( response ) {

				if( response.success ) {

					var output = "<h2>" + response.data.message + "</h2>";

					suma=0;

					$.each(response.data.users, function( key, value ) {

						co='';

						$.each( value, function ( userkey, uservalue) {

							if(userkey=='marca'  ){

								ma = uservalue

								uservalue = '<div class="bold">' + uservalue + '</div>'

							};

							if(userkey=='art'  ){

								ar = uservalue

								uservalue = '<div class="izquierdo">' + '<div class="bold">' +  ' Art: ' + uservalue + '</div>' + '</div>'

							};

							if(userkey=='pven'  ){

								pv = uservalue

								uservalue = '<div class="derecho">' + '<div class="bold">' +  ' $' + uservalue + ' ' + '</div>' + '</div>'

							};

							if(userkey=='descripcion'  ){                 //|| userkey=='marca1'

								de = uservalue

								uservalue = '<div class="bold">' + uservalue + '</div>'

							};

								if(userkey=='colo'  ){                											co = uservalue;

												co = co.replace(/--/g,'');

									uservalue = '<div class="bold">' + uservalue + '</div>'

								};

							if(userkey=='tall'  ){                											ta = uservalue;

												ta = ta.replace(/--/g,'');

									uservalue = '<div class="bold">' + uservalue + '</div>'

								};

							});

suma=suma+1

output += '<div class="caja1"><div class="caja2">';

output += '<div id="contform">';

output += '<div  >';

output += '<div class="marc">' + ma ;

output += '</div><div class="arti">' + 'Art: ' + ar + '<div class="precio">' +  '$' + pv ;

output += '</div></div><div class="descri">' + de ;

output += '</div><div class="colores">' + 'Colores:' + co

output += '</div><div class="talles">' + 'Talles:' + ta

 output += '<input type="submit" class="submit"  id="compras"  name="submit" value="AL' + suma + 'GO" onclick =  "prueba(this)">'

output +=  '</div>';

output += "</div></div>";

output += "</div>";

 output += '<div id="container">';

  output += '<div onclick="galery(this)">';

 output += '<img src="images/' + ma + '/' + ar + 'g.jpg"/>';

 output += "</div></div>";

output += "</div>";

				});

				$("#response-container").html(output);

					var key = JSON.parse(sessionStorage.getItem('key'));

					if (key === null) {

				$(".arti").hide();

				$(".precio").hide();

				$(".colores").hide();

				$(".talles").hide();

					$(".caja2").css("height", "125");

					}else{

				$(".arti").show();

				$(".precio").show();

				$(".colores").show();

				$(".talles").show();

					$(".caja2").css("height", "230");

					}

			} else {

				$("#response-container").html('No ha habido suerte: ' + response.data.message);

			}

		})

		.fail(function( jqXHR, textStatus, errorThrown ) {

			$("#response-container").html("Algo ha fallado: " +  textStatus);

		});

	});

});