如何解决EventListener 没有按预期切换
我希望我的代码仅在用户单击按钮时显示包含字体真棒图标的“i”元素。因此事件侦听器。我设置的 css 规则是“显示：无”。然后在我的 javascript 文件中，我编写了一行代码 'document.getElementById("icon").style.display = "block"' 以便在用户单击按钮时使相关元素可见。但是，无论用户是否单击按钮，该元素始终可见。我使用了 classList.toggle() 但也没有成功。如果有人能修复我的代码那就太好了。
const name = document.getElementById("name");
const image = document.getElementById("image");
var personPaying = ""
const btn = document.getElementById("btn");
const people = ["pierre","paul","jacques","henry" ];
const date = new Date().getDay();
const daysOfWeek = Array.from({length: 7},(item,i) => {
return new Date(0,i).toLocaleDateString("en-US",{weekday: "long"})
})
var today = daysOfWeek[date];
var names = {
"Monday": "emilie","Tuesday": "emilie","Wednesday": "jessica","Thursday": "jessica","Friday": "paul","Saturday": "paul","Sunday": "pierre",}
console.log(names[today])
btn.addEventListener("click",function() {
date >= 0 && date < 2 ? personPaying = `today is ${today} so ${names[today]} is footing the bill`
: date >= 2 && date < 4 ? personPaying = `today is ${today} ${names[today]} is paying`
: date >= 4 && date < 6 ? personPaying = `Hi ${names[today]},today is ${today} so although we are in Amsterdam we're not going ducth`
: personPaying = `Hi ${names[today]},today is ${today},your turn to pay today`
name.textContent = personPaying;
image.src = `picture/${names[today]}.png`
image.alt = "picture of an avatar"
document.getElementById("icon").style.display = "block";
},false).center {
margin: 100px 50px 75px 100px;
/* border: 3px solid green; */
border-style: inset;
border-width: medium;
border-radius: 15px;
Box-shadow: 5px 10px;
padding: 20px;
text-align: center;
background-color: rgb(250,250,250);
font-family: "copperplate","Papyrus","fantasy";
font-size: 50px;
font-variant: "small-caps";
}
button {
Box-shadow: 5px 10px;
font-family: 'Krona One',"sans-serif";
/* font-family: "copperplate","fantasy"; */
font-size: 30px;
font-weight: light;
margin: 100px 200px 75px 100px;
padding: 10px;
transition: 0.5s;
}
button:hover {
font-family: "fantasy";
Box-shadow: inherit;
}
body {
background-color: rgb(180,180,180);
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
background-size: auto;
}
.unseen {display: none;
}
img {
Box-shadow: 5px 10px;
width: 30%
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<Meta charset="utf-8">
<title>Who's buying today</title>
<link rel="stylesheet" href="index.css">
<link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Krona+One&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/2da085e01f.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="name" class="center"></div>
<button id="btn" type="submit">who's paying</button>
<img id="image" src="">
<i id="icon" class="far fa-money-bill-alt unseen"></i>
<script src="index.js" type="text/javascript"></script>
</body>
</html>解决方法
事情按预期工作。您的 CSS 正在被正在下载的外部 CSS 覆盖。
增加 .unseen CSS 类的特异性以使其工作。
i.unseen {
display: none
}
如果元素拒绝切换它的类，在其父类上切换类，子类将遵守
此处 <i> 出于某些原因拒绝切换 .unseen，但您始终可以将父级包裹在它周围，您可以使用它来切换 .unseen。
示例：<span class="unseen"><i></span>
这样 <i> 将沿其父级消失。当您切换 .unseen 时，它会再次出现，反之亦然
const name = document.getElementById("name");
const image = document.getElementById("image");
var personPaying = ""
const btn = document.getElementById("btn");
const people = ["pierre","paul","jacques","henry"];
const date = new Date().getDay();
const daysOfWeek = Array.from({
length: 7
},(item,i) => {
return new Date(0,i).toLocaleDateString("en-US",{
weekday: "long"
})
})
var today = daysOfWeek[date];
var names = {
"Monday": "emilie","Tuesday": "emilie","Wednesday": "jessica","Thursday": "jessica","Friday": "paul","Saturday": "paul","Sunday": "pierre",}
console.log(names[today])
btn.addEventListener("click",function() {
date >= 0 && date < 2 ? personPaying = `today is ${today} so ${names[today]} is footing the bill` :
date >= 2 && date < 4 ? personPaying = `today is ${today} ${names[today]} is paying` :
date >= 4 && date < 6 ? personPaying = `Hi ${names[today]},today is ${today} so although we are in Amsterdam we're not going ducth` :
personPaying = `Hi ${names[today]},today is ${today},your turn to pay today`
name.textContent = personPaying;
image.src = `picture/${names[today]}.png`
image.alt = "picture of an avatar"
document.getElementById("icon").classList.toggle("unseen");
},false).center {
margin: 100px 50px 75px 100px;
/* border: 3px solid green; */
border-style: inset;
border-width: medium;
border-radius: 15px;
box-shadow: 5px 10px;
padding: 20px;
text-align: center;
background-color: rgb(250,250,250);
font-family: "Copperplate","Papyrus","fantasy";
font-size: 50px;
font-variant: "small-caps";
}
i{
font-size:3rem;
}
button {
box-shadow: 5px 10px;
font-family: 'Krona One',"sans-serif";
/* font-family: "Copperplate","fantasy"; */
font-size: 30px;
font-weight: light;
margin: 100px 200px 75px 100px;
padding: 10px;
transition: 0.5s;
}
button:hover {
font-family: "fantasy";
box-shadow: inherit;
}
body {
background-color: rgb(180,180,180);
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
background-size: auto;
}
.unseen {
display: none;
}
img {
box-shadow: 5px 10px;
width: 30%
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Who's buying today</title>
<link rel="stylesheet" href="index.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Krona+One&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/2da085e01f.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="name" class="center"></div>
<button id="btn" type="submit">who's paying</button>
<img id="image" src="">
<span id="icon" class="unseen"><i class="far fa-money-bill-alt"></i><span>
<script src="index.js" type="text/javascript"></script>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。