[SOLUCIONADO] Cambiar de pagina al pulsar sobre una imagen

[dglypho]

Hola tengo un problema con unas imagenes y no se como solucionarlo. Tengo cuatro imagenes que las cargo desde una base de datos

Código Javascript:

function cargarImagenes(miArray){
    var array_datos=JSON.parse(miArray);
    var div=document.createElement("div");
    for(var i in array_datos){
        var imagen=document.createElement("img");
        imagen.setAttribute("src","imagenes/"+array_datos[i].IMAGEN);
        imagen.setAttribute("value",array_datos[i].ID_CURSO);
        imagen.addEventListener('click',irACurso,true);
        div.appendChild(imagen);
    }
}
 

La variable miArray obtiene los datos de una consulta anterior a la base de datos para que muestre las imagenes.

Una vez que pulso la imagen que deseo quiero que me vaya a otra pagina que tenga relacion con la imagen que e pulsado. En este caso la funcion es la siguiente:

Código Javascript:

function irACurso(){
    var cod_curso="";
    var imagen=document.getElementsByName("imagen");
    for(var i in imagen){
        cod_curso=imagen[i].value;
    }
    alert("imagen "+cod_curso);
}
 

Lu único que quiero de momento es que el último alert me muestre el código que se corresponde con la imagen pulsada pero lo unico que obtengo es un valor "undefined".
Si alguien sabe que puede estar pasando y me puede ayudar se lo agradeceria mucho y si algo no se entiende de lo que necesito podeis preguntar

[Alexis88]

Lo que pasa es que el elemento img no puede tener el atributo value. En su defecto, puedes asignarle un atributo personalizado el cual puedes recuperar con el método getAttribute o con la propiedad dataset.

Código HTML:

<img id = "foo" data-propiedad = "bar" />
 

Código Javascript:

//Con getAttribute
alert(document.querySelector("#foo").getAttribute("data-propiedad")); //bar
 
//Con dataset
alert(document.querySelector("#foo").dataset.propiedad); //bar
 

Otro error que veo que cometes es que intentas tomar al conjunto de imágenes mediante el nombre 'imagen' cuando debería de ser img, además de que el método que deberías de usar es getElementsByTagName pues, el que estás usando, toma a los elementos por el valor de la propiedad name y no veo que asignes alguno, sin embargo, como solo deseas obtener el valor del —ya realizada la corrección— atributo personalizado, puedes usar la palabra reservada this puesto que realizas la llamada a la función irACurso al darle clic a la imagen.

Código Javascript:

function irACurso(){
    alert(this.dataset.propiedad);
}
 

Como las imágenes son creadas de manera dinámica, debes de usar el método setAttribute para crear los atributos personalizados ya que la propiedad dataset es de solo lectura.

Código Javascript:

imagen.setAttribute("data-propiedad", "imagenes/"+array_datos[i].IMAGEN);
 

Y no olvides adherir el <div> creado en la primera función al documento o a alguna parte de este.

Saludos

[dglypho]

Muchas gracias por la ayuda Alexis. La verdad que el concepto de dataset no lo habia visto en javascript y con tu indicacion y buscando su documentacion en internet ya me ha quedado un poco mas claro. Ademas ya he conseguido que me muestre la informacion correspondiente a esa imagen asi que no he tenido ningun problema aplicando esto a mi codigo.
Muchas Gracias