使用脚本变量隐藏HTML中的元素

我有一个从变量加载HTML页面的用例。

现在我有3个状态要维护(待定、完成、失败(

在每个状态上，我想显示不同的消息和元素

<script>
var status = "COMPLETED";
function hideBoth() {
document.getElementById("cont1").style.visibility = "hidden";
document.getElementById("cont2").style.visibility = "hidden";
console.log(status, "-=--Status");
if (status === "COMPLETED") {
console.log(status, "INSIDE COMPLETED");
console.log(
document.getElementById("COMPLETED"),
"INSIDE COMPLETED CHECK"
);
document.getElementById(status).innerHTML;
document.getElementById("PENDING").style.visibility = "hidden";
document.getElementById("FAILED").style.visibility = "hidden";
}
if (status === "PENDING") {
document.getElementById("COMPLETED").style.visibility = "hidden";
document.getElementById("PENDING").innerHTML = status;
document.getElementById("FAILED").style.visibility = "hidden";
} else {
document.getElementById("COMPLETED").style.visibility = "hidden";
document.getElementById("PENDING").innerHTML = status;
document.getElementById("FAILED").style.visibility = "hidden";
}
}
</script>

这是脚本标签，看起来像

整个代码都在这里https://codesandbox.io/s/elated-lamport-fwhqsm?file=/index.html

我在哪里错过了东西，不太确定。我能得到一些关于我错过了什么的线索吗？

提前谢谢。

它有两个问题：

元素cont1和cont2不在HTML中，它在那里失败并停止执行
else子句在status=="completed"时执行；已完成"；块我应该是最初if的一部分

我分叉了你的代码并在这里修复了它：https://codesandbox.io/s/elated-breeze-gmh5c4?file=/index.html

考虑以下内容。

var status = "COMPLETED";
function hideBoth() {
//document.getElementById("cont1").style.visibility = "hidden";
//document.getElementById("cont2").style.visibility = "hidden";
console.log(status, "-=--Status");
if (status === "COMPLETED") {
console.log(status, "INSIDE COMPLETED");
console.log(
document.getElementById("COMPLETED"),
"INSIDE COMPLETED CHECK"
);
document.getElementById(status).innerHTML;
document.getElementById("PENDING").style.visibility = "hidden";
document.getElementById("FAILED").style.visibility = "hidden";
} else if (status === "PENDING") {
document.getElementById("COMPLETED").style.visibility = "hidden";
document.getElementById("PENDING").innerHTML = status;
document.getElementById("FAILED").style.visibility = "hidden";
} else {
document.getElementById("COMPLETED").style.visibility = "hidden";
document.getElementById("FAILED").innerHTML = status;
document.getElementById("PENDING").style.visibility = "hidden";
}
}

加上以下HTML更改。

<body onload="hideBoth()">
<center class="success">
<div id="FAILED">
<lottie-player
src="https://assets9.lottiefiles.com/packages/lf20_imrP4H.json"
id="FAILED-player"
background="transparent"
speed="1"
style="width: 200px; height: 200px;"
loop
autoplay
></lottie-player>
</div>
<div id="COMPLETED">
<lottie-player
src="https://assets5.lottiefiles.com/packages/lf20_x4fnw3zb.json"
background="transparent"
speed="1"
id="COMPLETED-player"
style="width: 200px; height: 200px;"
loop
autoplay
></lottie-player>
</div>
<div id="PENDING">
<lottie-player
src="https://assets2.lottiefiles.com/packages/lf20_usmfx6bp.json"
id="PENDING-player"
background="transparent"
speed="1"
style="width: 200px; height: 200px;"
loop
autoplay
></lottie-player>
</div>
</center>
</body>

您可以看到，现在您的JavaScript针对一个特定的HTML元素。此外，更新为if/else if/else语句将确保三个状态中的一个是可见的。

相关内容

最新更新

热门标签：