Javascript 为什么我会得到；未捕获类型错误：无法读取属性'；风格'；“无效”的定义；

我正在创建一个弹出窗口，让用户共享。代码是：

var ShareContent = document.getElementById("Share-Content");

// Get the button that opens the modal
var ShareButton = document.getElementById("ShareBtn");

// Get the <span> element that closes the modal
var ShareSpan = document.getElementsByClassName("close Share")[0];

// When the user clicks on the button, open the modal
ShareButton.onclick = function() {
  ShareContent.style.display = "block";
};

// When the user clicks on <span> (x), close the modal
ShareSpan.onclick = function() {
  ShareContent.style.display = "none";
};

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == ShareContent) {
    ShareContent.style.display = "none";
  }
};

它是这样运行的：

var modal=document.getElementById（“弹出”）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“PopupButton”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭设置”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
};
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
};
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
};
.Popup{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退颜色*/
背景色：rgba（0,0,0,0.4）；/*黑色，不透明度*/
}
.弹出内容{
背景色：#fefe；
位置：相对位置；
边界半径：8px；
保证金：15%自动；/*15%从顶部和居中*/
填充：20px；
边框：1px实心#888；
宽度：80%；/*可能更多或更少，具体取决于屏幕大小*/
字体系列：“Raleway”，无衬线；
字体大小：300；
字体大小：30px；
动画名称：animatetop；
动画持续时间：0.5s；
}@关键帧动画顶点{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
/*关闭按钮*/
.结束{
颜色：#aaa；
浮动：对；
字号：28px；
字体大小：粗体；
}
.关闭：悬停{
颜色：黑色；

设置
关闭&次；

设置：

暗模式
以下是您在代码中犯的错误：

您尚未正确访问共享span close.Share div您必须使用下面的代码尝试
.close.Share
作为选择器

var ShareSpan=document.querySelector（“close.Share”）


这是您的第一个错误
未捕获类型错误：无法读取null的属性“style”

您的
有一个
共享内容的类，但是您试图使用
document.getElementById（“共享内容”）
访问它，这就是为什么会出现错误

未捕获的TypeError:无法将属性“onclick”设置为null


当您尝试在Javascript中执行
ShareContent.style.display=“none”
时

在下面的代码片段中，我已经解决了这两个错误：

无错误代码：（我将实现留给您，因为我觉得您更了解您的代码规范）：）


var ShareContent=document.querySelector（“.Share Content”）；//此处更正
//获取打开模式对话框的按钮
var ShareButton=document.getElementById（“ShareBtn”）；
//获取关闭模态的元素
var ShareSpan=document.querySelector（“.close.Share”）；//此处更正
//当用户单击该按钮时，打开模式对话框
ShareButton.onclick=函数（）{
ShareContent.style.display=“block”；
};
//当用户单击（x）时，关闭模式对话框
ShareSpan.onclick=函数（）{
ShareContent.style.display=“无”；
};
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
if（event.target==ShareContent）{
ShareContent.style.display=“无”；
}
}；

分享
关闭&次；

分享：

通常，有两个主要原因可能导致此错误

您需要确保没有为不存在的元素设置属性-可能您没有正确写入标识符-
2.可能是因为元素是在DOM准备就绪之前调用的。请始终确保在DOM元素准备就绪时访问它，将JS文件放在HTML页面顶部也会导致此类错误！确保将JS文件路径放在正文末尾和正文内部。
非常感谢大家的回答。但是我已经解决了这个问题。结果是我在按钮中缺少了一个
标记，导致js脚本搜索一个不存在的id。但是感谢您的帮助。
如果没有具有给定
id的元素
，则返回
null
-没有具有
id的元素
等于
共享内容nt
在HTML中执行该语句时，有一个id为
共享内容的按钮
@theknightD2您可以将
.HTML
代码附加到您的问题吗？
在HTML中有一个id为共享内容的按钮
是，但如果该脚本在HTML出现之前出现在您的页面中，那么它将被执行eDictive，此时浏览器还不会解析包含
共享内容
元素的HTML，因此它在DOM中不存在，因此JavaScript无法找到它。现在还不清楚它在真实页面中是如何组合的，但项目在页面中的显示顺序可能很重要（例如，除非您在DomContentLoaded事件处理程序中包装脚本）。我的代码现在出现错误“Uncaught TypeError:无法设置undefined”的属性“onclick”。错误如下：
ShareSpan.onclick=function（）{
下的
=function（）{
是的，您是对的：）发生错误的原因是您的ShareContent变量为null。原因是您使用了ShareContent.style.display=“none”；但是ShareContent被错误地使用document.getElementById（）访问。让我更新我的答案…其他
<!-- Button -->
<button class="DefaultButton" id="ShareBtn">
   Share
</button>
<!-- Share Popup -->
    <div class="Share">
      <div class="Share-Content">
        <span class="close Share">Close &times;</span>
        <p>
          Share:
        </p>
        <div class="flex-container"> 
        </div>
      </div>
    </div>


var modal = document.getElementById("Popup");

// Get the button that opens the modal
var btn = document.getElementById("PopupButton");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close Settings")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
};

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
};

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
};