Soy yo, Boogabooga,
Tengo una duda que me desconcierta mucho. Tengo una función que crea dinámicamente algunos elementos HTML con JS, y cuando configuro .value , los resultados son completamente diferentes a cuando configuro dataset.value a pesar de que se asignó la misma variable a ambos, a continuación se muestra mi JS :
function displayBox(title, src, id){ let container = document.createElement('div'); let list = document.createElement('ul'); let listItem = document.createElement('li'); let image = new Image(); listItem.innerHTML = title; image.src = src; listItem.dataset.value = id; listItem.value = id; listItem.innerHTML += id; list.appendChild(image); list.appendChild(listItem); container.appendChild(list); container.classList.add('shopifyProduct'); return container; }Aquí está el elemento HTML cuando lo inspecciono con herramientas de desarrollo
<li data-value="6736442654756" value="1933934628">Cactus Sneaker Women 6736442654756</li> También estoy generando el valor en el innerHTML solo para ver si de alguna manera donde lo genero cambia su valor. Como puede ver en la función anterior, la variable: id se asigna a ambos atributos, pero ¿terminan asignándose diferentes valores?
¿Alguien ha encontrado este extraño comportamiento antes?
Gracias, -Boogabooga
En primer lugar, para desmitificar el resultado... 1933934628 = 6736442654756 % 4294967296 y typeof list.value === 'number' ...
¿¿¿Como qué???
El atributo de value para li tiene un significado real , y obviamente está limitado a 32 bits
Nota: según las especificaciones de HTML , el elemento li tiene las siguientes propiedades
Atributos de contenido:
Global attributes
Si el elemento no es un elemento secundario de un elemento demenuoul: valor:valueordinal del elemento de la lista
Por lo tanto, el value solo es relevante cuando li son hijos de ol ... cuando los hijos de ul o menu (el único otro padre válido de un li ), entonces el value no está "definido"
Parece que algunos navegadores (¿la mayoría?) no están "a la altura de las especificaciones" en esto...
Además, no se menciona el límite de 32 bits en ninguna parte de la especificación, solo ese value debe ser un número entero válido
En resumen, no use atributos de value en ningún elemento que no tenga eso como un atributo "nativo", como la entrada, por ejemplo.
Ya estás usando data-value , así que quédate con eso