The method getElementByID is not defined in the WebIQ Designer

Hi, forum,

I need to clarify the button creation method on WebIQ Designer v2.15.10.

Q: What should I use to define the Javascript code among these two:

option 1: var listNav = document.getElementsByClassName("list-menu")[0];

option 2: var listNav = document.getElementById("list-menu");

Q2: What should I set the WebIQ Config page of the button to call the ClassName or ID:

option 1: ClassName / CSS Modifiers --> list-menu?

option 2: Control Name; instead of iq-button, using list-menu?

Q3: When I click on the button in real-time on the web browser, I can't see class="" that includes my WebIQ definition, it has data-ui="icon" and class="iq-icon"

Q4: Button creation is confusing and I want to use ID to set to new buttons, but WebIQ has not got any ID section to edit or assign, this is a lot confusing and I think it is really difficult to set the class or ID of the individual and grouped (classed) items on WebIQ

Thank you.

What actually do you want to achieve?
Access the widget using JavaScript or style a widget using CSS?

WebIQ does not use IDs intentionally and instead uses the data-ui attribute, but that should not interest you actually, because it's all hidden in the Visuals framework for you. The Scripting Demo illustrates how to work with the widgets with JavaScript.

If you want to work with JavaScript then here are some links:
- https://customer.smart-hmi.de/download/deliver/docs/documentation-webiq-visuals-reference-2.16-5ba5/shmi.html#.onReady__anchor (use in a LocalScript, where you might have to wait for the widget to be available, rendered and initialized to access it due to asynchronous loading and timings)
- https://customer.smart-hmi.de/download/deliver/docs/documentation-webiq-visuals-reference-2.16-5ba5/shmi.html#.getUiElement__anchor (for use in UI Actions where you know the corresponding widget is available, rendered and initialized already)