style.display="；“无”；；不'；无法使用javascript DOM

作为一个初学者，我正在尝试创建一个模式，一旦单击共享按钮，就会显示该模式，我似乎不明白为什么不执行onclick功能，想法是一旦单击共享按钮，显示：无将更改为display:block，因此style.display=“block”可能有问题，或者更可能是我吸了。 感谢您的帮助。 谢谢你

HTML代码：

<div class="navbar-container">
  <div class="nav nav-1" >
    <button class="btn btn-1" id="sharebtn">Share </button>
  </div>

  <div class="nav nav-2">
    <button class="btn btn-2"  id="howbtn">how does it work ?</button>      
</div>
<div class="nav nav-3" >
    <button class="btn btn-3"  id="abouttns">About</button>
</div>
</div>


  <!---Creating the modals-->
<div id="modal-share">
    <div class="modal-header">
        <button class="close-share">&times;</button>
    </div>
    <div class="link">
        <input type="text" class="link-input" placeholder="www.youtube.com/jdlkfsjakfdsa">
        <button id="share-btn" onclick="fuck">share</button>
    </div>
    <div class="description">
        <input type="text" max="50" placeholder="cats are not that smart">
    </div>
    
</div>

Javascript代码：

<script>
    var modal=document.getElementById("modal-share");
    var share_btn=document.getElementsById("sharebtn");
    var close_share=document.getElementsByClassName("close-share");


   

    share_btn.onclick=function(){
        modal.style.display="block";
    }
    close_share.onclick=function(){
        modal.style.display="none";
    }

    window.onclick=function(event){
        if(event.target==modal){
            modal.style.display="none";
        }
    }

</script>

var modal=document.getElementById（“模式共享”）；
var share_btn=document.getElementsById（“sharebtn”）；
var close_share=document.getElementsByClassName（“close share”）；
share_btn.onclick=function（）{
modal.style.display=“block”；
}
close_share.onclick=function（）{
modal.style.display=“无”；
}
window.onclick=函数（事件）{
if（event.target==modal）{
modal.style.display=“无”；
}
}

实际上，脚本中存在一个错误，导致其他所有操作都失败，即

var share_btn=document.getElementsById("sharebtn");

没有函数文档.getElementsById，只有document.getElementById。我有你的代码与以下链接上的修复工作-

---

两件事，首先，您的代码中有一个输入错误

getElementsById

应该是

getElementById

。第二个是

getElementsByClassName

返回一个类似数组的元素集合，因此需要从数组中检索第一个元素。下面是更新后的javascript

const modal=document.getElementById（“模式共享”）；
const share_btn=document.getElementById（“sharebtn”）；//原稿中的打字错误
const close_share=document.getElementsByClassName（“close share”）[0]；//选择HTML集合中的第一个元素
share_btn.onclick=函数（）{
modal.style.display=“块”；
}
close_share.onclick=函数（）{
modal.style.display=“无”；
}
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

您的脚本中存在导致问题的

打字错误

var share_btn=document.getElementsById("sharebtn");

它应该是
getElementById
而不是
getElementsById

如果我们使用
querySelector
来查询DOM元素和事件
addEventListener
，而不是重写click函数，那会更好

var share_btn = document.querySelector("#sharebtn");
var close_share = document.querySelector(".close-share");
var modal = document.querySelector("#modal-share");

share_btn.addEventListener("click", function () {
    modal.style.display = "block";
});
close_share.addEventListener("click", function () {
    modal.style.display = "none";
});

window.addEventListener("click", function (event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
});


非常感谢你，伙计
var share_btn = document.querySelector("#sharebtn");
var close_share = document.querySelector(".close-share");
var modal = document.querySelector("#modal-share");

share_btn.addEventListener("click", function () {
    modal.style.display = "block";
});
close_share.addEventListener("click", function () {
    modal.style.display = "none";
});

window.addEventListener("click", function (event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
});