不能获取 <div> 使用JavaScript打开页面

Question

我试图找出为什么我的按钮无法使用javascript正确加载页面的原因。 我不知道它是CSS还是Javascript错误，而且我一直在盯着它寻找它。 任何帮助将不胜感激。

以下是Javascript代码：-

<script language="JavaScript" type="text/javascript">
function show_details(thisId) {
var deets = (thisId.id);
el = document.getElementById("overlay");
el.style.display = (el.style.display == "block") ? "none" : "block";
el = document.getElementById("events");
el.style.display = (el.style.display == "block") ? "none" : "block";
var hr = new XMLHttpRequest();
var url "Scripts/bookings.php";
var vars = "deets="+deets;
hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
    if(hr.readyState == 4 && hr.status == 200) {
        var return_data = hr.responseText;
        document.getElementById("events").innerHTML = return_data;
    }
}
hr.send(vars)
document.getElementById("events").innerHTML = "processing...";
}
</script>

CSS集：

body
{
height:100%;
margin:0;
padding:0;
}

#overlay 
{
display:none;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height:100%;
z-index:2000;
background: #000;
opacity: .9;
}

#events 
{
display: none;
width:500px;
border:4px solid #9C9;
padding: 15 px;
z-index:3000;
margin-top: 100px;
margin-right: auto;
margin-left:auto;
background-color: #FFF;
height:400px;
overflow:scroll;
}

#eventControl 
{
display: block;
width: 100%;
height: 30px;
z-index: 3000;
}

#eventBody 
{
display: block;
width: 100%;
z-index:3000;
}

号召性用语按钮：

<input name='$date' type='submit' value='Details' id='$date' onClick='javascript:show_details(this);'>

$ date变量是从用户选择中设置的。 我可以发布更多代码，但我认为错误在于所提供的代码。 请询问是否有其他想法。

Answer 1

更改

var url "Scripts/bookings.php";

至

var url = "Scripts/bookings.php";

另外，将el变量定义为函数的属性，我建议使用var el 。 还要为document.getElementById使用单独的变量。 只是为了使下一个开发人员保持理智。

您正在调用document.getElementById("events"); 两次，只需第二次使用相同的变量（在回调函数中）