[SOLUCIONADO] ¿Cómo obtener valor de atributo DATA (HTML5)?

[berkeleyPunk]

Hola!

La idea es esta: Tengo un select con varios options, cada uno con el atributo data, el cual debe ser leído con JS al seleccionar una opción de dicho select.

Código HTML:

<select onchange="x(this.dataset.fruta)">
   <option>:: Selecciona una fruta ::</option>
   <option value="01" data-fruta="fresa">Fresa  </option>
   <option value="02" data-fruta="naranja">Naranja </option>
   <option value="03" data-fruta="uva">Uva</option>
</select>
 

Código Javascript:

function x(dato)
{
  if (dato == "fresa")
  {
     alert("He logrado leer el atributo DATA!\n"+dato);
  }
  else
  {
     alert("ERROR");
  }
}
 

Esto no funciona.

Ahora, si en vez de poner this.dataset.fruta ponemos this.value, el alert sí nos muestra el valor respectivo del value. ¿Por qué con value sí, y con dataset no?


Saludos!

[berkeleyPunk]

Encontré la solución. He aquí el script que funciona, que es una variación de la respuesta, encontrada en este sitio:

Código HTML:

<select id="test" onchange='x(this.value)'>
        <option value="0" data-label="HongKong">Hong Kong</option>
        <option value="1" data-label="China">China</option>
    </select>
 

Código Javascript:

var select = document.getElementById('test');
 
        function x(dato)
        {
            alert( select.options[dato].getAttribute('data-label') );
        }
 

Saludos!

[Alexis88]

Eso sucede porque no estás tomando correctamente al valor del pseudo-atributo. Lo primero que debes de hacer es tomar a la opción seleccionada, de la siguiente manera:

Código HTML:

<select onchange="x(this.options[this.selectedIndex])">
 

De esta forma, dentro del array de opciones del combo, tomo a la opción seleccionada cuando se produzca el evento onchange. Para no hacerlo más largo, la toma del valor del pseudo-atributo la haremos en la función:

Código Javascript:

function x(opcion){
    console.log(opcion.dataset.fruta);
}
 

De esta manera, se mostrará el valor del pseudo-atributo de la opción seleccionada.

Saludos, Calamardo.

[berkeleyPunk]

Maestro, buen día.

Tu código funciona bien. Ahora, ¿mmm? ¿Entre líneas debo entender que cuando se trabaja con listas lo primero es leer el índice y luego hacer lo demás?

Saludos!

[Alexis88]

Claro. La idea es ir en orden, en este caso, de adentro hacia afuera. Primero, hallas a la opción, luego, obtienes su valor y, finalmente, lo muestras.

Saludos

[berkeleyPunk]

Iniciado por Alexis88

Claro. La idea es ir en orden, en este caso, de adentro hacia afuera. Primero, hallas a la opción, luego, obtienes su valor y, finalmente, lo muestras...

Ok, entendido.

Una última cosa, maestro. Estoy intentando hacer que cuando se elija una opción del select se muestre un <p> con el nombre de la fruta y se oculten los otros <p>.

Como siempre, no tengo dificultad en lograr eso con uso de 1,500 if's. El problema es en hacerlo con pocas líneas de código, digamos con un bucle. Algo así:

Código HTML:

<select onchange="x(this.options[this.selectedIndex], this.value)">
       <option>:: Elige una fruta ::</option>
       <option value="0" data-fruta="fruta0">Naranja</option>
       <option value="1" data-fruta="fruta1">Fresa</option>
       <option value="2" data-fruta="fruta2">Uva</option>
    </select>
 
    <a id="fruta0" style="display: none;">Naranja</a>
    <a id="fruta1" style="display: none;">Fresa</a>
    <a id="fruta2" style="display: none;">Uva</a>
 

Código Javascript:

function x(indice, value)
       {
          var propiedadData = indice.dataset.fruta;
 
            var miArray = new Array()
            miArray[0]  = document.getElementById('fruta0');
            miArray[1]  = document.getElementById('fruta1');
            miArray[2]  = document.getElementById('fruta2');
 
 
          for (var i=0; i<miArray.length; i++)
          {
            if (miArray[value].id != propiedadData)
            {
                miArray[value].style.display = "none";
            }
            else
            {
                miArray[value].style.display = "block";
                }
          }
       }
 

Pero, claro está, no sirve bien. ¿Me ayudas?

[Alexis88]

Es más simple de lo que crees. Solo debes de asignar el id de cada párrafo al pseudo-atributo de cada opción, aunque sería aún más sencillo si trabajaras con el atributo value. Un ejemplo:

Código HTML:

<select onchange = "fn(this.value)">
    <option>Seleccione una opción</option>
    <option value = "manzana">Manzana</option>
    <option value = "pera">Pera</option>
    <option value = "mango">Mango</option>
</select>
 
<p id = "manzana">Manzana</p>
<p id = "pera">Pera</p>
<p id = "mango">Mango</p>
 

Código CSS:

p{
    opacity: 0;
    position: absolute;
    transition: .5s;
}
 

Código Javascript:

var parrafos = document.getElementsByTagName("p"),
    total = parrafos.length;
 
function fn(id){
    for (var i = 0; i < total; i++){
        if (parrafos[i].id == id){
            parrafos[i].style.opacity = 1;
        }
        else{
            parrafos[i].style.opacity = 0;
        }
    }
}
 

Lo que hago es simple. A cada opción del combo, le asigno el id de cada párrafo, desvanezco a estos últimos y en el código JavaScript, tomo a todos los párrafos y, en la función, itero sobre ese conjunto de párrafos. En cada iteración, comparo el valor seleccionado con el id de cada opción; si son iguales, muestro al párrafo, caso contrario, lo oculto. De esta forma, da igual si tienes una, tres o mil opciones, siempre funcionará.

DEMO

Saludos

[berkeleyPunk]

Iniciado por Alexis88

Es más simple de lo que crees...

Jaajaja! Increible!, realmente es tan sencillo como dices ! Hace un tiempo, no sé, digamos 1 año, saqué de la biblioteca un libro de Javascript, le di un par de hojeadas y vamos, eso fue mi instrucción académica al respecto .

Todo lo demás, lo poquillo que he aprendido, es gracias a la red. Pero imagino que ha de haber por ahí alguna bibliografía que te conduzca a prácticas comunes o buenas prácticas en Javascript. ¿Tienes por ahí a la mano alguna referencia al respecto, que nos evite crear la rueda (como yo) y más bien tomar prácticas reconocidas que solucionen problemas básicos o comunes? ¿O es que eso, simplemente, te lo da la experiencia?


Saludos!

[Alexis88]

Pues, siendo sincero, todo lo que suelo explicar en este foro (y que creo que aún es poco) lo he aprendido trabajando, ayudando por acá y con manuales y ejemplos en la red. El único libro que leí sobre JavaScript es el de Fundamentos de jQuery de Rebecca Murphey. Ahora estoy leyendo 'Secrets of the JavaScript Ninja' de John Resig, hay buena teoría. Hay otros dos de los que he leído muy buenos comentarios: 'JavaScript: The Good Parts' y 'JavaScript: The Definitive Guide'. Sería cuestión de que los busques y leas. De más está decirte que, con la práctica, lograrás desarrollar aún más tus conocimientos, como sucede con todo en la vida.

Por cierto, hay otra solución aún más corta para lo que buscas, solo que no funcionará en navegadores anteriores a IE9.

Código Javascript:

var parrafos = document.querySelectorAll("p");
function fn(id){
    [].forEach.call(parrafos, function(parrafo){
        parrafo.style.opacity = parrafo.id == id ? 1 : 0;
    });
}
 

Saludos

[berkeleyPunk]

Iniciado por Alexis88

...Por cierto, hay otra solución aún más corta para lo que buscas...

Cuando tenga tiempo, me voy a dar nuevamente una vuelta a la biblioteca y repasar los libros que encuentre sobre Javascript, para sacarles más provecho. Por lo demás, me quedo con la otra solución que diste.

Saludos, maestro, y hasta pronto!