使用javascript按钮单击显示/隐藏Div元素

我有一个网站使用谷歌地图Api添加和保存标记。单击保存的标记时，会显示一个信息窗口，其中有一个按钮。单击此按钮时，我希望它显示一个隐藏的DIV元素，其中包含一个保存的标记详细信息表

包含InfoWindow的JS是：

var eventContent = $('<div class="event-info">' + '<h4 class="event-name">' + point.name + '</h4><hr>' +
        '<span><h5>Date: </h5>' +
        '<p class="event-date">' + point.edate + '</p></span>' +
        '<p class="event-description">'+ point.description +'</p>' + 
        '<button id="remove-event" name="remove-event" onclick="showDetails();" class="remove-event btn btn-danger btn-sm" title="View Event">View Event</button>'+
        '</div>');

    // Display Event details on marker click
    google.maps.event.addListener(event_markers[i], "click", function () {
        infowindow.setContent(eventContent[0]);
        infowindow.open(map, event_markers[i]);
        map.setCenter(marker.getPosition());
        map.setZoom(10);
    });

---

您的元素没有“事件详细信息”的

id

，而是

类。尝试改用
GetElementsByCassName
：

document.getElementsByClassName("event-details")[0].style.display = "none"// returns multiple elements so you should select the first (0th) item.

也许更好的解决方案是在html元素中添加一个“id”：

<div id="event-details" class="event-details" style="display: none ">



这样，您的
getElementById
方法应该捕获您想要的元素。
您是否尝试过给div一个ID

也许是“getElementById”不起作用的原因


然后：

document.getElementById（“eventDetails”）.style.display=“无”
 固定。
我的showDetails函数出现语法错误，缺少结束符}

function showDetails()
{
   if (document.getElementById("event-details").style.display == "none" ) {
       document.getElementById("event-details").style.display="block";

   }
   else
   {
      document.getElementById("event-details").style.display="none";
    }
}

请使用下面的
querySelector
。因为您已经有了要单击的元素的id，如下所示：

<button id="remove-event" name="remove-event" class="remove-event btn btn-danger btn-sm" title="View Event">View Event</button>

也许可以试试这些-

1） 将div id更改为other，而不是使用类名

2） 在这里，您正在检查“none”，但我认为如果在调用此代码之前没有在代码中的任何位置显示div，那么可以删除if子句，因为该div已经隐藏，如果它已经隐藏，if子句将不起作用

if (document.getElementById("event-details").style.display == "none" ) {
       document.getElementById("event-details").style.display="";
   } 

3） 尝试使用-而不是

 document.getElementById("event-details").style.display="";

到

或

当您的div具有类“event details”而不是id时，您可以使用getElementById。将属性类更改为id，并请缓存
DOM
元素，因为
DOM
扫描成本很高，在这种情况下可能不是因为它不庞大，而是一般情况下！对不起，我本想改变的。我确实尝试过id=“event details”，但它不起作用。为什么你建议在2015年使用getElementsByClassName，那时你可以使用querySelector和querySelectorAll？我已经尝试过添加id=“event details”，但它不起作用。是的，我完全同意你@NikolayTalanov。我可以解释如何
查询选择器
工作，或者我可以给他一个直截了当的答案。
getElementsByClassName
的作用很明显。@Stephen，我会打开你的控制台看看你是否有javascript错误，然后我会从控制台手动调用
showDetails（）
，以确保设置正确。有很多事情可能会出错，调试是找到罪魁祸首的最快方法。在Chrome中，你可以打开开发者工具，然后点击“控制台”选项卡。是的，我已经试过了，只是忘了在问题中包含id=“event details”.它现在被修改了，但你调试过了吗？您可能正在获取元素，但按ID获取元素并不像预期的那样返回元素。所以“.style.display”不容易访问哈哈！你想的很好！
document.querySelector("#remove-event").addEventListener("click", function() {
    var elem = document.querySelector("#event-details");
    if (elem.style.display == "none") {
        elem.style.display = "block";
    } else {
        elem.style.display = "none";
    }
});

if (document.getElementById("event-details").style.display == "none" ) {
       document.getElementById("event-details").style.display="";
   } 

 document.getElementById("event-details").style.display="";

document.getElementById("event-details").style.display=block;

document.getElementById("event-details").show();