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当我选中我的复选框时，我认为我的功能一切正常，但控制台有不同的想法..！未捕获的TypeError：无法设置属性＆＃39; className＆＃39; of null，是输出

任何人都可以帮助我吗？

P.S。我在具有相同逻辑的函数之前制作并且我没有问题

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";

未捕获的TypeError无法设置属性＆＃39; className＆＃39;空控制台输出

1 个答案: