Ad

InnerHTML Updates Work, But Are Not Rendered In Mobile Mode

- 1 answer

On an eCommerce website I have code that updates the inner HTML of some elements when the user changes the product. This works perfectly has has been for some time. However, today I noticed, on mobile or even chrome developer tools (viewing as mobile), the DOM does update (can confirm this by selecting the element in the console.) However the changes are not rendered on the page until returning back to desktop mode.

This is also the case in safari.

See the following screenshot, the span with ID variantLength contains "164" but displays on screen as "144" (The value from the previous product). As I mentioned on desktop there is no problem with these updates.

example screenshot problem

Ad

Answer

The problem is that you have two selectors with the same id on the page:

document.querySelectorAll('#variantLength')
// Result: NodeList(2) [span#variantLength, span#variantLength]

So one of those selector values is getting updated but I guess on mobile you show the second one.

Ad
source: stackoverflow.com
Ad