使用复选框和 javascript 更改 CSS 值

Question

我正在尝试使用 javascript 隐藏和显示基于复选框的 state 的 div，但我似乎没有做对。 我对 js 不是很有经验，所以我可能会遗漏一些非常明显的东西。 任何建议将不胜感激。 目标 div 是 html 代码后半部分中的 on-toggle div。

 var checkbox = document.querySelector("input[name=toggle]"); checkbox.addEventListener( 'change', function() { if(this.checked) { document.getElementById("on-toggle").style.display = "block"; document.getElementById("on-toggle").style.height = "auto"; } else { document.getElementById("on-toggle").style.display = "none"; document.getElementById("on-toggle").style.height = "0"; }

 <div id="switch"> <h2 id="CTA-switch">Turn creativity on </h2> <div class="switch"> <input type="checkbox" name="toggle"> <label for="toggle"> <i class="bulb"> <span class="bulb-center"></span> <span class="filament-1"></span> <span class="filament-2"></span> <span class="reflections"> <span></span> </span> <span class="sparks"> <i class="spark1"></i> <i class="spark2"></i> <i class="spark3"></i> <i class="spark4"></i> </span> </i> </label> </div> </div> <div id="on-toggle"> <div id="references"> <h1>REFERENCE SITES</h1> </div> </div> </div>

Answer 1

您需要获取一个实际元素，以便您的 javascript 代码有效。 html 代码上的任何元素上当前不存在 ID“on-toggle”。