JavaScript 基于复选框切换 DIV

Question

我有几个复选框和 div。我想根据复选框切换 div。我尝试使用三元来切换 div，但它没有按我的预期工作。下面是js。我不想使用 jQuery。

function toggle(flavor){

  var checkBox = document.getElementById(flavor)

  checkBox === true ? document.getElementById(flavor+"Div").style.display = "block" : document.getElementById(flavor+"Div").style.display = "none";

}

这是我得到的错误： pen.js:4 Uncaught TypeError: Cannot read property 'style' of null

感谢您的任何帮助，您可以提供。

Answer 1

你的笔上有一些拼写错误。JavaScript 区分大小写，因此 vanillaDiv 和 VanillaDiv 不是同一件事。您的所有 DIV 均以小写字母开头，而复选框均以大写字母开头，因此您永远无法正确匹配该元素。编辑：（仅供记录）要正确验证是否选中复选框，您需要使用该.checked属性。（忘记写这部分文本，尽管我发布的代码从一开始就进行了此更正）。所以改变：<div id="vanillaDiv" class="hideDiv"><textarea&nbsp; id="vanComments"></textarea></div>到 ：<div id="VanillaDiv" class="hideDiv"><textarea&nbsp; id="vanComments"></textarea></div>此外，使用.checked复选框属性和三元更简单的方法是：function toggle(flavor){&nbsp; var checkBox = document.getElementById(flavor).checked;&nbsp; document.getElementById(flavor+"Div").style.display = checkBox === true ? "block" : "none";}

Answer 2

就像评论中提到的那样，您有一个案例问题需要修复“Vanilla”->“vanilla”等。另外，也许这对三元运算符会有帮助（我花了一段时间才理解它）：通常，您希望使用三元来返回某些内容，而不仅仅是在执行两个不同条件之间切换。IE。let newVar = checkSomething === checkAgainst ? this : that由于您已经使用一个.hideDiv类来设置显示样式，因此您可以使用该element.classList.toggle(className)方法在两种状态之间切换，并让 vanilla js 在后台处理布尔值。我将其留console.log(thing)在片段中只是因为它可以帮助我了解每个点的内容。function toggle(flavor){&nbsp; var checkBox = document.getElementById(flavor)&nbsp; console.log(checkBox)&nbsp;&nbsp;&nbsp; let divElement = document.getElementById(flavor+"Div")&nbsp; console.log(divElement)&nbsp;&nbsp;&nbsp; divElement.classList.toggle('hideDiv')&nbsp; }.hideDiv{&nbsp; display:none}<input type="checkbox" id="vanilla" onClick="toggle('vanilla')"/> Vanilla<input type="checkbox" id="cherry"&nbsp; onClick="toggle('cherry')"/> Cherry<input type="checkbox" id="apple" onClick="toggle('apple')" /> Apple<div id="vanillaDiv" class="hideDiv"><textarea&nbsp; id="vanComments"></textarea></div><div id="cherryDiv" class="hideDiv"><textarea id="cherComments"></textarea></div><div id="appleDiv" class="hideDiv"><textarea id="appComments"></textarea></div>

Answer 3

有两个问题：html 事件应该具有相同的目标大小写级别，您当前正在尝试获取 DOM 中存在的像“VanillaDiv”而不是“vanillaDiv”这样的 id。javascript 代码需要检查element.checked属性而不是询问element === truefunction toggle(flavor) {&nbsp; const checkbox = document.getElementById(flavor);&nbsp; const textarea = document.getElementById(flavor+"Div");&nbsp; // here you need to use .checked instead of element&nbsp; textarea.style.display = checkbox.checked ? "block" : "none";}.hideDiv {&nbsp; &nbsp; display: none}<input type="checkbox" id="vanilla" onClick="toggle('vanilla')"/> Vanilla<input type="checkbox" id="cherry" onClick="toggle('cherry')"/> Cherry<input type="checkbox" id="apple" onClick="toggle('apple')" /> Apple<div id="vanillaDiv" class="hideDiv"><textarea id="vanComments">vanilla</textarea></div><div id="cherryDiv" class="hideDiv"><textarea id="cherComments">cherry</textarea></div><div id="appleDiv" class="hideDiv"><textarea id="appComments">apple</textarea></div>