javascript - 为什么代码不将类重新分配给id'ed标记，而是中断？

有人可以帮我解决以下问题吗？

我有一个带有3个选项的简单下拉菜单，想删除在选择了选项3（值为RU）但默认情况下分配给div的“隐藏”类（带显示的简单CSS：无）选择（再次）选择选项1或2时，添加/离开班级。

隐藏的div的HTML如下所示：

<div class="hidden" id="cityRestrictions">
    <label for="cityQuery">Please select the city you were calling from: </label>
    <select id="cityQuery">
        <option value="Moscow"> Moscow </option>
        <option value="StPetersburg"> Saint Petersburg </option>
        <option value="Other"> Other </option>
    </select>
</div>

我的JavaScript如下：

dialInLocation.addEventListener("change", function() {
    let location = document.getElementById('dialInLocation');
    if(location.value == "RU") {
        removeActivityItem();
    }
});

function removeActivityItem() {
    cityRestrictions = cityRestrictions.removeAttribute("class");
}

这很好。如果我在下拉列表中选择值为RU的选项，则从div中删除隐藏的类并显示内容。
但是，如果我添加一个

if(location.value == "RU") {
    removeActivityItem();
} else {
    addActivityItem();
}

将addActivityItem定义为：

function addActivityItem() {
    cityRestrictions = cityRestrictions.setAttribute("class","hidden");
}

然后我的代码被完全破坏了。

最佳答案

首先，如果cityRestrictions是元素，则无需键入cityRestrictions = cityRestrictions.setAttribute("class","hidden")，因为您可以键入cityRestrictions.setAttribute("class","hidden");

其次，建议不要使用cityRestrictions.style.display = "none";和cityRestrictions.style.display = "block";更改样式，而不是添加该类并删除它。