Javascript 无法设置div'；要在事件侦听器中阻止的显示样式

我试图实现这样一种行为：我的覆盖div在点击按钮后在整个页面上都可见。我试图将jquery语法与

.show（）

/

.hide（）

和

getElementById

函数一起使用，但无法完成。下面的代码输出为“第一状态：块”和“第二状态：无”，尽管它应该是“第二状态：块”，并且div根本不可见。正确的做法是什么

$(document).ready(function() {
    document.getElementById("save-button").addEventListener('click', function() {
        // $("#overlay").show();
        document.getElementById("overlay").style.display = 'block';
        var state = document.getElementById("overlay").style.display;
        console.log("1st state: " + state);
        $.ajax({
            type: "POST",
            url: "/myUrl?arg1=$(arg1)&arg2=$(arg2)",
            data: {arg1: arg1, arg2: arg2},
            success: function (response) {
                var state = document.getElementById("overlay").style.display;
                console.log("2nd state: " + state);
                // $("#overlay").hide();
                document.getElementById("overlay").style.display = 'none';
            },
            error: (resp) => {
                // $("#overlay").hide();
                document.getElementById("overlay").style.display = 'none';
            }
        });
        // $("#overlay").hide();
        document.getElementById("overlay").style.display = 'none';
    }, false);
})

html:

---

这是因为您的

document.getElementById（“overlay”）.style.display='none'在
$.ajax
调用之后调用（第22~23行）。该方法是异步的，将立即返回，导致覆盖被直接隐藏

您应该只在
$.ajax
回调中隐藏覆盖

删除该行，您应该可以：

$（函数（）{
var overlay=$（“#overlay”）；
$（#保存按钮”）。在（“单击”，函数（）上{
overlay.show（）；
$.ajax({
类型：“POST”，
url:“/myUrl”，
数据：{
arg1:arg1，
arg2:arg2
},
成功：功能（响应）{
overlay.hide（）；
},
错误：函数（响应）{
overlay.hide（）；
}
});
});
})

另外，如果使用POST请求，为什么还要将数据作为GET参数传递？另外，您的代码样式很奇怪（有时是
函数，有时是箭头，等等），我建议您使用一个过梁来保持一致。
这是因为您的
文档。getElementById（“overlay”）.style.display='none'在
$.ajax
调用之后调用（第22~23行）。该方法是异步的，将立即返回，导致覆盖被直接隐藏

您应该只在
$.ajax
回调中隐藏覆盖

删除该行，您应该可以：

$（函数（）{
var overlay=$（“#overlay”）；
$（#保存按钮”）。在（“单击”，函数（）上{
overlay.show（）；
$.ajax({
类型：“POST”，
url:“/myUrl”，
数据：{
arg1:arg1，
arg2:arg2
},
成功：功能（响应）{
overlay.hide（）；
},
错误：函数（响应）{
overlay.hide（）；
}
});
});
})

另外，如果使用POST请求，为什么还要将数据作为GET参数传递？另外，您的代码风格很奇怪（有时是
函数，有时是箭头，等等），我建议您使用一个linter来保持一致。
为什么jQuery和DOM的奇怪混合？经典的JS和ES6？您的代码应该是
$（function（）{$（“#保存按钮”）。在（“单击”，function（）{$（“#覆盖”）.show（）；$.ajax（{type:“POST”，url:/myUrl），数据：{arg1:arg1，arg2:arg2}，成功：function（response）{$（“#覆盖”）。隐藏（）}，错误：function（response）{$(“#overlay”）.hide（）}}}}}}}
并将按钮设为type=“button”以防万一为什么jQuery和DOM的奇怪组合？经典的JS和ES6？您的代码应该是
$（function（）{$（“#save button”）。在（“click”）上，function（）{$（“#overlay”）.show（）$.ajax（{type:“POST”，url:“/myUrl”，数据：{arg1:arg1，arg2:arg2}，成功：函数（响应）{$（“#覆盖”）.hide（）；}，错误：函数（响应）{$（“#覆盖”）.hide（）}}）；
并将按钮设为type=“button“以防万一，摆脱DOM调用现在他有了jQueryInDect，我只是更新了代码以更正确地使用jQuery。摆脱DOM调用现在他有了jQueryInDect，我只是更新了代码以更正确地使用jQuery。
  <div id="overlay" class="overlay"></div>
  <button id="save-button">Save</button>

.overlay {
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none; 
  padding: 0;
  margin: 0;  
}