为了账号安全,请及时绑定邮箱和手机立即绑定

JavaScript 基于复选框切换 DIV

JavaScript 基于复选框切换 DIV

叮当猫咪 2023-08-18 13:57:07
我有几个复选框和 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感谢您的任何帮助,您可以提供。
查看完整描述

3 回答

?
有只小跳蛙

TA贡献1824条经验 获得超8个赞

你的笔上有一些拼写错误。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";

}


查看完整回答
反对 回复 2023-08-18
?
30秒到达战场

TA贡献1828条经验 获得超6个赞

就像评论中提到的那样,您有一个案例问题需要修复“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>


查看完整回答
反对 回复 2023-08-18
?
呼啦一阵风

TA贡献1802条经验 获得超6个赞

有两个问题:

  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>


查看完整回答
反对 回复 2023-08-18
  • 3 回答
  • 0 关注
  • 133 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号