为什么我会"Uncaught TypeError: Cannot read property 'style' of null"

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

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";
}
};

HTML代码：

<!-- 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>

但当我运行它时，我会：CCD_ 1
如果有帮助的话，我有另一个带有此代码的弹出窗口。


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";
}
};

它是这样运行的：

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";
}
};

.Popup {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0, 0, 0); /* Fallback color */
background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}
.Popup-Content {
background-color: #fefefe;
position: relative;
border-radius: 8px;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
font-family: "Raleway", sans-serif;
font-weight: 300;
font-size: 30px;
animation-name: animatetop;
animation-duration: 0.5s;
}@keyframes animatetop {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover {
color: black;

<html>
<button class="DefaultButton PopupButton" id="PopupButton">
Settings
</button>
<div id="Popup" class="Popup">
<div class="Popup-Content">
<span class="close Settings">Close &times;</span>
<p>
Settings:
</p>
<button
>
Dark Mode
</button>
</div>
</div>

我知道代码错误是因为"；模态"；变量，但我不知道如何解决它。如果有人能帮忙，我将不胜感激。错误来自

ShareButton.onclick = function() {
ShareContent.style.display = "block";
};

具体来自：.style.display = "block";

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

您需要确保您没有为不存在的元素设置属性-可能您没有正确写入标识符-
可能是因为元素是在DOM准备好之前调用的。一定要确保在DOM元素准备好时访问它，将JS文件放在HTML页面的顶部也会导致这样的错误！确保将js文件路径放置在正文的末尾和正文内部。

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

您尚未访问您的ShareSpan关闭。正确共享div，您必须使用以下代码尝试.close.Share作为选择器。

var ShareSpan=document.querySelector("close.Share"(；

这是您的第一个错误Uncaught TypeError: Cannot read property 'style' of null

您的<div class="Share-Content">有一个Share-Content类，但您正试图使用document.getElementById("Share-Content")访问它，这就是出现错误的原因。

Uncaught TypeError:无法设置null 的属性"onclick">

当您尝试在Javascript中执行ShareContent.style.display = "none";时。

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

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

var ShareContent = document.querySelector(".Share-Content"); // Correction here
// Get the button that opens the modal
var ShareButton = document.getElementById("ShareBtn");
// Get the <span> element that closes the modal
var ShareSpan = document.querySelector(".close.Share"); // Correction Here
// 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";
}
};

<!-- 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>

非常感谢大家的回答。但我已经解决了这个问题。事实证明，我在按钮中丢失了一个<id>标记，导致js脚本搜索一个不存在的id。但是谢谢你的帮助。

相关内容

最新更新

热门标签：