我有三个标签，它们来自字体真棒。每个都包含一个图标。当用户单击按钮时会显示它们。然而，最后一个不可见。当我使用inspect时，我可以看到它在那里，但它的尺寸是0x18。我该如何解决这个问题，以便用户可以在她/他的屏幕上看到它？
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",
}
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";
var unseen = document.getElementsByClassName("unseen");
var unseenArray = [...unseen]
unseenArray.map(x => x.style.display = "inline");
}, false);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",
}
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";
var unseen = document.getElementsByClassName("unseen");
var unseenArray = [...unseen]
unseenArray.map(x => x.style.display = "inline");
}, false);<!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 class="container">
<div id="name" class="center"></div>
<button id="btn" type="submit">who's paying</button>
<img id="image" src="">
<i class="far fa-money-bill-alt unseen"></i>
<i class="fab fa-cc-visa unseen"></i>
<i class="fad fa-money-check-edit-alt unseen"></i>
</div>
<script src="index.js" type="text/javascript"></script>
</body>
</html>未显示的图标(money-check-edit-alt(仅在Font Awesome Pro许可证下可用。其他的都是免费的。您需要升级才能使用该特定图标。