javascript - 未捕获的 TypeError 无法设置空控制台输出的属性 'className'

Question

我有这个html代码:

<input type="checkbox" id="template-contactform-baggages-custom" name="baggages" value="baggages" class="sm-form-control" onchange="showcheck(this, numbag)" />
<div id="numbag" class="hidden">
    <input type="number" name="numofbag" value="" />
</div>

这个 JavaScript 函数:

function showcheck(check, inputid) {

var checkid=check.id;
var checked=check.checked;
var inputelement = document.getElementById(inputid);

if(!checked){
    inputelement.className = "";
    inputelement.className = inputelement.className + "hidden";

}else{
    inputelement.className = "";
    inputelement.className = inputelement.className + "nothidden";

 } 

}

如您所见，当我选中复选框时，我想隐藏或显示隐藏的 div， 我认为我的功能一切正常，但控制台有不同的想法..! 输出为未捕获的类型错误:无法将属性“className”设置为 null

谁能帮我吗？

附:我之前做了一个具有相同逻辑的函数，我没有问题

Answer 1

onchange="showcheck(this, numbag)"

应该是

onchange="showcheck(this, 'numbag')"

并且在设置className时需要添加一个空格。但问题是您的代码将不断添加类，因此它将同时隐藏和不隐藏。您应该使用 classList

inputelement.classList.toggle('hidden', !checked);
inputelement.classList.toggle('nothidden', checked);

由于您只是设置类(错过了清除它的部分)，因此您可以只执行三元运算符。

inputelement.className = checked? "nothidden" : "hidden";