it is I, Boogabooga,

I have a conundrum which baffles me greatly. I have a function which dynamically creates some HTML elements with JS, and when setting the .value the results is completely different as to when I set dataset.value despite the same variable being assigned to both, below is my 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;
}

Here is the HTML element when I inspect it with dev tools

<li data-value="6736442654756" value="1933934628">Cactus Sneaker Women 6736442654756</li>

I am outputting the value in the innerHTML as well just to see if somehow where I output it changes its value. As you can see in the above function the variable: id is being assigned to both attributes yet different values end up being assigned?

Has anyone encountered this strange behaviour before?

Thanks, -Boogabooga

CodePudding user response：

Firstly, to demystify the result ... 1933934628 = 6736442654756 % 4294967296 and typeof list.value === 'number' ...

As to why???

The value attribute for li has an actual meaning, and it's obviously limited to 32bits

Note: according the HTML specs, the li element has the following properties

Content attributes:
Global attributes
If the element is not a child of an ul or menu element: value — Ordinal value of the list item

So, value is only relevant when li are children of ol ... when children of ul or menu (the only other valid parent of an li) then value is not "defined"

Seems some (most?) browsers aren't "up to spec" on this ...

Also, there is no mention of the 32bit limit anywhere in the spec, just that value must be a valid integer

In short, don't use value attributes on any elements that don't have that as a "native" attribute, like input for example

You're using data-value already, so stick with that