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  id="vanComments"></textarea>

</div>

到 ：

<div id="VanillaDiv" class="hideDiv">

<textarea  id="vanComments"></textarea>

</div>

此外，使用.checked复选框属性和三元更简单的方法是：

function toggle(flavor){

  var checkBox = document.getElementById(flavor).checked;

  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){

  var checkBox = document.getElementById(flavor)

  console.log(checkBox)

  

  let divElement = document.getElementById(flavor+"Div")

  console.log(divElement)

  

  divElement.classList.toggle('hideDiv')

  }

.hideDiv{

  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"></textarea>

</div>

<div id="cherryDiv" class="hideDiv">

<textarea id="cherComments"></textarea>

</div>

<div id="appleDiv" class="hideDiv">

<textarea id="appComments"></textarea>

</div>

Answer 3

有两个问题：

1. html 事件应该具有相同的目标大小写级别，您当前正在尝试获取 DOM 中存在的像“VanillaDiv”而不是“vanillaDiv”这样的 id。

2. javascript 代码需要检查element.checked属性而不是询问element === true

function toggle(flavor) {

  const checkbox = document.getElementById(flavor);

  const textarea = document.getElementById(flavor+"Div");

  // here you need to use .checked instead of element

  textarea.style.display = checkbox.checked ? "block" : "none";

}

.hideDiv {

    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>