EventListener 没有按预期切换
EventListener not toggling as expected to
我希望我的代码仅在用户单击按钮时显示包含超棒字体图标的“i”元素。因此事件监听器。我设置的 css 规则是“显示：none”。然后在我的 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,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", "Papyrus", "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 class 的特异性使其工作。
i.unseen {
display: none
}
如果该元素拒绝切换它的 class，请切换其父元素的 class 并且子元素会遵守
此处 <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, 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", "Papyrus", "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>
我希望我的代码仅在用户单击按钮时显示包含超棒字体图标的“i”元素。因此事件监听器。我设置的 css 规则是“显示：none”。然后在我的 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,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", "Papyrus", "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 class 的特异性使其工作。
i.unseen {
display: none
}
如果该元素拒绝切换它的 class，请切换其父元素的 class 并且子元素会遵守
此处 <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, 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", "Papyrus", "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>