Javascript unable to Show/hide Dom Element (on Pannellum example)

Question

i have a problem when i try to hide/show an element in the DOM using the javascript call document.getElementById(elemId).style.visibility = visible/hidden.

This is a very strange behaviour , when i get the DOM element by id and set the visibility to visible, in the console i can see that the inline style have been modified but the element on the screen is still hidden.

I'll link a fiddle example of my problem, hope someone can help

This is the function i'm using to hide/show DOM elements

function updateHTML(elmId, value) {
  var elem = document.getElementById(elmId);
  if (typeof elem !== 'undefined' && elem !== null) {
    document.getElementById(elmId).style.visibility = value;
    console.log(elem);
  }
}

Anyway even the direct call document.getElementById('2').style.visibility = 'visible' is not working

PS What i'm trying to achieve is to show the span over the exclamation mark that is, for css default, hidden

Fiddle Demo

Answer 1

When you call the updateHtml the element has not been created yet.

For testing added the updateHtml inside a timeout call after 1s and it works.

setTimeout(() => updateHTML("8", "visible"), 1000);

jsfiddle demo