Javascript 无法显示/隐藏 Dom 元素（在 Pannellum 示例中）

Question

当我尝试使用 javascript 调用 document.getElementById(elemId).style.visibility = visible/hidden 隐藏/显示 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 默认值，隐藏

Fiddle Demo

Answer 1

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

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

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

jsfiddle demo

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。

其他things:

ID 和 NAME 令牌必须以字母 ([A-Za-z]) 开头，并且可以是 后跟任意数量的字母、数字([0-9])、连字符（“-”）、 下划线 ("_")、冒号 (":") 和句点 (".")。