javascript DOM 隐藏 HTML div
[英]javascript DOM hiding HTML div
问题描述
I'm attempting to hide a div element from a javascript code in the game I'm making.
我试图在我正在制作的游戏中从 javascript 代码中隐藏一个 div 元素。 I'm probably making a dumb mistake, but can someone please help me?我可能犯了一个愚蠢的错误，但有人可以帮助我吗？
HTML: HTML：
<div id="stats">
<table border="1">
<tr>
<text id="playerstats" style="width: 25%;height:30%;">You: <span id="playerhp">x</span>/<span id="playermaxhp">x</span> HP, <span id="playeratk">x</span> ATK, <span id="playerspd">x</span> SPD, <span id="playerdef">x</span> DEF.</text> <br>
</tr>
<tr>
<text id="enemystats" style="width: 25%;height:30%;">Enemy: <span id="enemyhp">x</span>/<span id="enemymaxhp">x</span> HP, <span id="enemyatk">x</span> ATK, <span id="enemyspd">x</span> SPD, <span id="enemydef">x</span> DEF. </text>
</tr>
</table>
</div>
Javascript function to hide:隐藏的Javascript函数：
function hide(elemID) {
elemId = elemId.toString();
if (document.getElementById(elemId) != undefined) {
document.getElementById(elemId).style.display = "none";
return true;
} else {
console.log("Element '" + elemID + "' not defined.");
return false;
}
When I go into the Chrome dev console, it always says that "elemID" is undefined no matter what I pass in (which is usually "stats"), and when I do breakpoints it shows me that is defined as "stats", then once it hits the if statement it returns the error.当我进入 Chrome 开发控制台时，无论我传入什么，它总是说“elemID”是未定义的（通常是“stats”），当我做断点时，它显示我被定义为“stats”，然后一旦遇到 if 语句，它就会返回错误。
3 个解决方案
解决方案1
2 2018-10-02 18:55:38
Your variable names were mismatched - elemId is not equal to elemID (note the capitalisation). 您的变量名不匹配elemId不等于elemID （请注意大写）。
Try this instead: 尝试以下方法：
function hide(elemID) {
elemID = elemID.toString();
if (document.getElementById(elemID) != undefined) {
document.getElementById(elemID).style.display = "none";
return true;
} else {
console.log("Element '" + elemID + "' not defined.");
return false;
}
}
解决方案2
1 2018-10-02 19:03:58
you are using to different variables in your function. 您正在使用函数中的不同变量。 In the function argument your variable is elemID but inside your function the variable you have used is elemId . 在函数参数中，变量为elemID，但在函数内部，您使用的变量为elemId 。 You don't need to use elemID = elemID.toString(); 您不需要使用elemID = elemID.toString(); You can straightaway use elemID inside your function as follows; 您可以在函数中直接使用elemID ，如下所示；
function hide(elemID) {
if (document.getElementById(elemID) != undefined) {
document.getElementById(elemID).style.display = "none";
return true;
}
else {
console.log("Element '" + elemID + "' not defined.");
return false;
}
}
解决方案3
0 2018-10-02 19:04:25
I updated your code. 我更新了您的代码。 You can just create the reference to the DOM element once and use it both times it's referenced in your function. 您只需创建一次对DOM元素的引用，然后两次在函数中对其进行引用即可。 No need to find the DOM element twice. 无需两次查找DOM元素。
You were referencing "elemID" as "elemId" inside your function. 您在函数内部将“ elemID”引用为“ elemId”。 That's why "elemId" is undefined. 这就是为什么未定义“ elemId”的原因。
function hide(elemID) { elemID = elemID.toString(); let domElem = document.getElementById(elemID); if (domElem != undefined) { domElem.style.display = "none"; return true; } else { console.log("Element '" + elemID + "' not defined."); return false; } } setTimeout(()=>{ hide("stats"); }, 1000)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <div id="stats">My Stats</div> </body> </html>
解决方案4
-1 2018-10-02 19:02:21
- Make sure you have elemID as a string. 确保您将elemID作为字符串。 eg
hide("stats")例如hide("stats") - add
varbeforeelemId在elemId之前添加var -
elemID.toString()should be the same as the variableelemID.toString()应该与变量相同
function hide(elemID) { var elemId = elemID.toString(); if (document.getElementById(elemId) != undefined) { document.getElementById(elemId).style.display = "none"; return true; } else { console.log("Element '" + elemID + "' not defined."); return false; } }
<div id="stats">Stats</div> <button onclick="hide('stats')">Hide</button>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.