基于标准隐藏/显示元素的 javascript 不适用于 style.display = "none"

Question

我的 html 中有这段 javascript，它获取表单输入，将其放入一个函数并返回一个 json。然后我想根据这个 json 中的值隐藏或显示某些表单元素。

目前，除了更改我试图隐藏/显示的元素的 style.display 属性之外，我可以做所有这一切，我可以用 getElementbyId 找到它们没问题（已经用其他东西测试过）但是变化我做的风格似乎没有做任何事情。

正如您在下面看到的，我已经发出了一些警报以确保一切正常，并且它们似乎都符合我对该功能的需求。显示 style.display 的警报甚至与我尝试将其更改为的内容相匹配，但是即使它显示“none”，表单元素仍会显示。

<script type="text/javascript">
    let selected = document.getElementById('selection1');
    let optional_toggle = document.getElementById("optional_element");
    let button = document.getElementById("button")

     button.onclick = function() {
        choice1 = selected.value;

        fetch('/form_choice/' + choice1).then(function(response) {

            response.json().then(function(data) {

                if (data.show_optional === "True") {
                    optional_toggle.style.display = ""
                    window.alert("first part of if");
                    window.alert(optional_toggle.style.display);
                    window.alert(data.show_optional);
                }
                else {
                    optional_toggle.style.display = "none"
                    window.alert("second part of if");
                    window.alert(optional_toggle.style.display);
                    window.alert(data.show_optional);
                    console.log(optional_toggle);
                }
                }
            )
            }
        )
    }
</script>

编辑：我添加了 console.log 行，但控制台中似乎没有显示任何内容。 console log image

Answer 1

问题是页面在脚本执行后重新加载到它的原始状态，所以我通过在函数后面添加“; return false”来停止这个：

<script type="text/javascript">
    let selected = document.getElementById('selection1');
    let optional_toggle = document.getElementById("optional_element");
    let button = document.getElementById("button")

     button.onclick = function() {
        choice1 = selected.value;

        fetch('/form_choice/' + choice1).then(function(response) {

            response.json().then(function(data) {

                if (data.show_optional === "True") {
                    optional_toggle.style.display = ""
                    window.alert("first part of if");
                    window.alert(optional_toggle.style.display);
                    window.alert(data.show_optional);
                }
                else {
                    optional_toggle.style.display = "none"
                    window.alert("second part of if");
                    window.alert(optional_toggle.style.display);
                    window.alert(data.show_optional);
                    console.log(optional_toggle);
                }
                }
            )
            }
        ); return false
    }
</script>