尝试在页面中创建“div”选择器：JavaScript TypeError
2020-11-28
36
所以我一直收到相同的错误：
index.html:184 Uncaught TypeError: Cannot read property 'style' of null
at xpxp (index.html:184)
at HTMLDivElement.onclick (index.html:127)
并且似乎总是指向这 4 行
if (core_me.style.display === "none")
我一直在尝试将脚本部分移到各处，并将
if
更改为简单的切换。
提前感谢您的时间！
<!DOCTYPE html>
<html>
<head>
<title>CV TOMAZ LIMA</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<script>
function meme( event ) {
var me = document.getElementById("me");
var xp = document.getElementById("xp");
var edu = document.getElementById("edu");
var contact = document.getElementById("contact");
var core_xp = document.getElementById("core_xp");
var core_edu = document.getElementById("core_edu");
var core_contact = document.getElementById("core_contact");
var core_me = document.getElementById("core_me");
if (core_me.style.display === "none") {
me.style.backgroundColor = "#000";
core_me.style.display = "block";
xp.style.backgroundColor = "#fff";
core_xp.style.display = "none";
core_edu.style.display = "none";
edu.style.backgroundColor = "#fff";
core_contact.style.display = "none";
contact.style.backgroundColor = "#fff";
}
else {
core_me.style.display = "none";
}
}
function xpxp( event ) {
var me = document.getElementById("me");
var xp = document.getElementById("xp");
var edu = document.getElementById("edu");
var contact = document.getElementById("contact");
var core_xp = document.getElementById("core_xp");
var core_edu = document.getElementById("core_edu");
var core_contact = document.getElementById("core_contact");
var core_me = document.getElementById("core_me");
if (core_xp.style.display === "none") {
xp.style.backgroundColor = "#000";
core_xp.style.display = "block";
me.style.backgroundColor = "#fff";
core_me.style.display = "none";
contact.style.backgroundColor = "#fff";
core_edu.style.display = "none";
edu.style.backgroundColor = "#fff";
core_contact.style.display = "none";
contact.style.backgroundColor = "#fff";
}
else {
core_xp.style.display = "none";
}
}
function eduedu( event ) {
var me = document.getElementById("me");
var xp = document.getElementById("xp");
var edu = document.getElementById("edu");
var contact = document.getElementById("contact");
var core_xp = document.getElementById("core_xp");
var core_edu = document.getElementById("core_edu");
var core_contact = document.getElementById("core_contact");
var core_me = document.getElementById("core_me");
if (core_edu.style.display === "none") {
edu.style.backgroundColor = "#000";
core_edu.style.display = "block";
me.style.backgroundColor = "#fff";
core_xp.style.display = "none";
xp.style.backgroundColor = "#fff";
core_me.style.display = "none";
core_contact.style.display = "none";
contact.style.backgroundColor = "#fff";
}
else {
core_edu.style.display = "none";
}
}
function contactcontact( event ) {
var me = document.getElementById("me");
var xp = document.getElementById("xp");
var edu = document.getElementById("edu");
var contact = document.getElementById("contact");
var core_xp = document.getElementById("core_xp");
var core_edu = document.getElementById("core_edu");
var core_contact = document.getElementById("core_contact");
var core_me = document.getElementById("core_me");
if (core_contact.style.display === "none") {
contact.style.backgroundColor = "#000";
core_contact.style.display = "block";
me.style.backgroundColor = "#fff";
core_xp.style.display = "none";
xp.style.backgroundColor = "#fff";
core_edu.style.display = "none";
edu.style.backgroundColor = "#fff";
core_me.style.display = "none";
}
else {
core_.style.display = "none";
}
}
</script>
<body>
<div class="top">
</div>
<div class="bk">
<div class="L">
<img class="avatar" src="images/avatar.jpg" alt="TOMAZ LIMA" width="300vw" height="300vh">
<h1 class="txt_e">TOMAZ LIMA</h1>
</div>
<div class="R">
<div class="top_bar">
<div onclick="meme( event )" class="me">ABOUT ME
</div>
<div class="xp" onclick="xpxp( event )">EXPERIENCE
</div>
<div class="edu" onclick="eduedu( event )">EDUCATION
</div>
<div class="contact" onclick="contactcontact( event )">CONTACT
</div>
</div>
<div class="core">
<div class="core_me" style="display:none;">
core_me
</div>
<div class="core_xp" style="display:none;">
core_xp
</div>
<div class="core_edu" style="display:none;">
core_edu
</div>
<div class="core_contact" style="display:none;">
core_contact
</div>
</div>
</div>
</div>
<script>
function meme( event ) {
var me = document.getElementById("me");
var xp = document.getElementById("xp");
var edu = document.getElementById("edu");
var contact = document.getElementById("contact");
var corexp = document.getElementById("core_xp");
var coreedu = document.getElementById("core_edu");
var corecontact = document.getElementById("core_contact");
var coreme = document.getElementById("core_me");
if (coreme.style.display === "none") {
me.style.backgroundColor = "#000";
coreme.style.display = "block";
xp.style.backgroundColor = "#fff";
corexp.style.display = "none";
coreedu.style.display = "none";
edu.style.backgroundColor = "#fff";
corecontact.style.display = "none";
contact.style.backgroundColor = "#fff";
}
else {
core_me.style.display = "none";
}
}
function xpxp( event ) {
var me = document.getElementById("me");
var xp = document.getElementById("xp");
var edu = document.getElementById("edu");
var contact = document.getElementById("contact");
var corexp = document.getElementById("core_xp");
var coreedu = document.getElementById("core_edu");
var corecontact = document.getElementById("core_contact");
var coreme = document.getElementById("core_me");
if (corexp.style.display === "none") {
xp.style.backgroundColor = "#000";
corexp.style.display = "block";
me.style.backgroundColor = "#fff";
coreme.style.display = "none";
contact.style.backgroundColor = "#fff";
coreedu.style.display = "none";
edu.style.backgroundColor = "#fff";
corecontact.style.display = "none";
contact.style.backgroundColor = "#fff";
}
else {
core_xp.style.display = "none";
}
}
function eduedu( event ) {
var me = document.getElementById("me");
var xp = document.getElementById("xp");
var edu = document.getElementById("edu");
var contact = document.getElementById("contact");
var corexp = document.getElementById("core_xp");
var coreedu = document.getElementById("core_edu");
var corecontact = document.getElementById("core_contact");
var coreme = document.getElementById("core_me");
if (coreedu.style.display === "none") {
edu.style.backgroundColor = "#000";
coreedu.style.display = "block";
me.style.backgroundColor = "#fff";
corexp.style.display = "none";
xp.style.backgroundColor = "#fff";
coreme.style.display = "none";
corecontact.style.display = "none";
contact.style.backgroundColor = "#fff";
}
else {
core_edu.style.display = "none";
}
}
function contactcontact( event ) {
var me = document.getElementById("me");
var xp = document.getElementById("xp");
var edu = document.getElementById("edu");
var contact = document.getElementById("contact");
var corexp = document.getElementById("core_xp");
var coreedu = document.getElementById("core_edu");
var corecontact = document.getElementById("core_contact");
var coreme = document.getElementById("core_me");
if (corecontact.style.display === "none") {
contact.style.backgroundColor = "#000";
corecontact.style.display = "block";
me.style.backgroundColor = "#fff";
corexp.style.display = "none";
xp.style.backgroundColor = "#fff";
coreedu.style.display = "none";
edu.style.backgroundColor = "#fff";
coreme.style.display = "none";
}
else {
core_.style.display = "none";
}
}
</script>
</body>
</html>
body{margin:0;font-size: 16px; font-family: "Trebuchet MS", sans-serif; background-color: #2F349D;}
a{text-decoration: none;}
h1,h2,h3,p{margin:0;}
.top{
display: inlineblock;
height: 10vh;
background-color: #232776;
}
.bk{
display: flex;
padding: 1vh;
}
.L{
display: flex;
flex-direction: column;
width: 19vw;
padding: 10vh 5vw 0;
text-align: center;
}
.R{
display: block;
width: 60vw;
height: 80vh;
padding: 4vh;
}
img.avatar{
border-radius: 50%;
border: 2px solid white;
border-color:#fff;
}
h1.txt_e{
padding: 5vh 2px;
}
.top_bar{
display: flex;
direction: row;
height: 15vh;
width: 60vw;
}
.me{
display: block;
width:15vw;
height:5vh;
text-align: center;
background-color:#fff;
padding: 5vh 0vw;
font-size: 4vh;
}
.xp{
display: block;
width:15vw;
height:5vh;
text-align: center;
background-color:#fff;
padding: 5vh 0vw;
font-size: 4vh;
}
.edu{
display: block;
width:15vw;
height:5vh;
text-align: center;
background-color:#fff;
padding: 5vh 0vw;
font-size: 4vh;
}
.contact{
display: block;
width:15vw;
height:5vh;
text-align: center;
background-color:#fff;
padding: 5vh 0vw;
font-size: 4vh;
}
.core{
position: relative;
}
.core_me{
display: block;
position: absolute;
height: 60vh;
width: 60vw;
background-color:#fff;
}
.core_xp{
display: none;
position: absolute;
height: 60vh;
width: 60vw;
background-color:#fff;
}
.core_edu{
display: none;
position: absolute;
height: 60vh;
width: 60vw;
background-color:#fff;
}
.core_contact{
display: none;
position: absolute;
height: 60vh;
width: 60vw;
background-color:#fff;
}
div[onclick] {
cursor: pointer;
}
2个回答
您未获取元素。如果不存在具有指定 ID 的元素，则
getElementById
返回
null
。据我所知，您使用了
class
而不是
id
。
例如：
<div class="xp" onclick="xpxp( event )">EXPERIENCE</div>
您使用了错误的属性。应该是：
<div id="xp" onclick="xpxp( event )">EXPERIENCE</div>
然后您可以
document.getElementById('xp')
。还请记住，ID 应该是唯一的。不应有多个具有相同 ID 的元素。如果您需要它，您可能应该使用
class
属性！
Emilio Grisolía
2020-11-28
什么是
core_me
，它在哪里定义？系统似乎将其解释为
null
，因此您需要确保可以从此函数读取该对象。
编辑：似乎另一位评论者有正确的答案。这是
class
和
id
之间的不匹配。
awesame
2020-11-28