Javascript无法显示/隐藏Dom元素(在Pannellum示例中)

Question

当我试图使用javascript调用document.getElementById(elemId).style.visibility =可视/隐藏在DOM中隐藏/显示一个元素时，我遇到了一个问题。

这是一种非常奇怪的行为，当我通过id获得DOM元素并将可见性设置为可见时，我可以在控制台中看到内联样式已经被修改，但屏幕上的元素仍然是隐藏的。

我会把我的问题联系起来，希望有人能帮上忙

这是我用来隐藏/显示DOM元素的函数

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

无论如何，即使是直接呼叫document.getElementById('2').style.visibility = 'visible'也不起作用。

PS我试图实现的是显示在感叹号上的跨度--对于css默认值来说，是隐藏的

小提琴演示

Answer 1

调用updateHtml时，元素尚未创建。

用于测试的在1s之后的超时调用中添加了updateHtml，它可以工作。

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

小提琴演示

Answer 2

我检查了您的小提琴，但是您在下面的代码中提到的id并不存在：

updateHTML("8", "visible");

在你的更新功能中你这样做..。

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

但是你得到了不存在元素的id。

其他事物

ID和名称标记必须以字母([A-Za-z])开头，后面可以是任意数量的字母、数字([0-9])、连字符("-")、下划线("_")、冒号(":")和句点(".")。