We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Ok, I Agree

Verge3d doesn’t recognize dynamically created HTML elements ID’s.

Home › Forums › General Questions › Verge3d doesn’t recognize dynamically created HTML elements ID’s.

Tagged: , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • 2024-03-03 at 4:54 pm #71291
    alekstoimenov
    Participant

    Hello all :bye: !

    I am working on a project of a virtually explorable 3D model of a house in which the user can zoom to rooms by clicking on them, and then click on individual objects to display some text.

    Since the project should also be accessible to people that are not very versed in newer technologies, I got asked to create a “mega menu” that allows to navigate through the information in a more “classical” way.

    To avoid redundant code, since there will be 100eds of items displayed in the mega menu, I decided to use “set prop Inner HTML to” to dynamically update the contents of the mega menu.

    While doing so, I realized that the ID’s of newly create HMTL elements are not recognized by Verge3d anymore, thus my code breaks. From what I understand, it is a Document Object Model timing issue, but I can’t really find a way around this.

    If anybody has an idea of how to make this work, let me know! I have attached some images to show the principle of the app + “mega menu”.

    PS: I know that one workaround would be to already create the html elements with proper ID’s in the doc, but was wondering if it could all be done dynamically.

    Attachments:
    You must be logged in to view attached files.
    2024-03-03 at 5:05 pm #71295
    kdv
    Participant

    Every time you re-create an HTML element with the same ID it looses its event listeners. I suppose you code doesn’t re-add event listeners to every newly created element.

    Puzzles and JS. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of meaning at all.

    2024-03-03 at 5:40 pm #71297
    alekstoimenov
    Participant

    Hey, thank you for the quick answer, how could you go about doing this?

    Here I have a simplified version of some code attached.

    Click an object -> change HTML and replaces it with new ID’s -> click on the newly created ID -> translate pop up.

    Although here it doesnt work since it doesnt recognize the nezly created HTML element ID

    Attachments:
    You must be logged in to view attached files.
    2024-03-03 at 7:20 pm #71302
    kdv
    Participant
    alekstoimenov wrote:

    Here I have a simplified version of some code attached.

    The second puzzle does nothing. It tries to register an event listener for an element with ID that doesn’n exist yet and fails. It’s a big mistake to think that the “on event of” puzzle is a monitoring puzzle. It just registers an event listener once the app is loaded and does nothing afterwards.

    Puzzles and JS. Fast and expensive.

    If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of meaning at all.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.