Javascript 使用按钮ID单击事件

我正在冒险学习一些javascript和jquery，在我的项目中，我有一个内联id的button元素。当你点击按钮时，它会在另一个div中淡出。我遗漏了一些东西，但由于我对这种语言不熟悉，我不确定我认为脚本函数是正确的

<span data-toggle="tooltip" data-placement="top" title="Open Radar Controls">
   <button id="play" class="map__control_icon"><i class="fa fa-play"></i></button>
</span>

还可能提到我现在在控制台中遇到错误

编辑

我将mapAds div添加到脚本中，当您按下按钮时，它会像预期的那样淡出，但雷达控制容器div不会淡出。所以至少我知道这和按钮没什么关系。我认为这与它被隐藏在文档中有关，我需要事件将其更改为先显示，然后淡入

$(document).ready(function() {
  $("#play").click(function() {
    $("#radar-control-container").delay(2000).fadeIn(1000);
    $("#mapAds").fadeOut(1000);
  });
});

---

我得到了它整理与以下，它的工程设计

添加此项以从其隐藏状态显示它

.css('visibility', 'visible').

然后是完整的脚本

$(document).ready(function() {
  $("#play").click(function() {
    $("#radar-control-container").css('visibility', 'visible').delay(2000).fadeIn(1000);
    $("#mapAds").fadeOut(1000);
  });
});

---

希望这是正确的，谢谢@charlietfl为我指明了正确的方向

有两件事，你导入jQuery了吗？并且您没有一个id为

雷达控制容器的元素，至少在您的示例中没有。第三个…该元素是隐藏的，以便可以淡入？1。）是的，JQuery被导入。我有其他脚本在这个页面和网站上使用它。2.）我没有在示例中包括ID radar-control_容器，因为它会使问题变得臃肿。但它确实存在，是的，它是隐藏在负载上的。在某种程度上，它显示页面首次加载的时间，然后在加载后隐藏。这是这场战斗之后的下一场战斗。
.css('visibility', 'visible').

$(document).ready(function() {
  $("#play").click(function() {
    $("#radar-control-container").css('visibility', 'visible').delay(2000).fadeIn(1000);
    $("#mapAds").fadeOut(1000);
  });
});