我无法弄清楚如何让innerHTML根据饥饿等级更改显示的文本。下面是我用来构建饥饿追踪器的 JS。最底部是放入innerHTML 中的函数，我已经尝试了所有不同的变量来尝试让它工作。我还尝试使用 Blood.forEach 将文本作为数组放入，但这也不起作用。
document.addEventListener("DOMContentLoaded", function (event) {
// copy code here
const makeHungerRating = function (noOfBlood = 5) {
let rating = 0;
let bloodComponent;
function changeHunger(newRating) {
rating = newRating;
}
function getBloodComponent() {
if (!bloodComponent) {
bloodComponent = document.createElement(`ul`);
bloodComponent.className = `hunger-rating`;
for (let i = 0; i < noOfBlood; i++) {
const li = document.createElement(`li`);
li.setAttribute(`data-rating`, i + 1)
li.className = `blood`;
if (i === 0) li.tabIndex = 0;
bloodComponent.append(li);
}
bloodComponent.addEventListener(`mouseover`, onMouseOver);
bloodComponent.addEventListener(`mouseLeave`, onMouseLeave);
bloodComponent.addEventListener(`click`, onMouseClick);
bloodComponent.addEventListener(`keyup`, onKeyUp)
}
return bloodComponent;
}
function renderChanges(rating) {
for (let i = 0; i < rating; ++i) {
bloodComponent.children[i].classList.add(`blood-filled`);
}
for (let i = rating; i < noOfBlood; ++i) {
bloodComponent.children[i].classList.remove(`blood-filled`);
}
}
function onMouseOver(e) {
let isBlood = e.target.classList.contains(`blood`);
if (isBlood) {
const { rating } = e.target.dataset;
renderChanges(rating)
}
}
function onMouseLeave(e) {
renderChanges(rating);
}
function onMouseClick(e) {
let blood = e.target ?? e;
let isBlood = blood.classList.contains(`blood`);
if (isBlood) {
activate(blood)
let { rating } = blood.dataset;
if (e.key !== `Tab` && rating === getRating()) {
rating = 0;
resetTabIndex();
bloodComponent.firstElementChild.tabIndex = 0;
}
changeHunger(rating);
renderChanges(rating);
}
}
function focusPrevBlood() {
let focusedBlood = document.activeElement;
if (focusedBlood.previousElementSibling) {
onMouseClick(focusedBlood.previousElementSibling);
}
}
function focusNextBlood() {
let focusedBlood = document.activeElement;
if (focusedBlood.nextElementSibling) {
onMouseClick(focusedBlood.nextElementSibling);
}
}
function activate(element) {
resetTabIndex();
element.tabIndex = 0;
element.focus();
}
function resetTabIndex() {
bloodComponent.childNodes.forEach((blood) => {
blood.tabIndex = -1;
})
}
function onKeyUp(e) {
switch (e.key) {
case `Tab`: {
onMouseClick(e);
break;
}
case `ArrowLeft`: {
focusPrevBlood()
break;
}
case `ArrowRight`: {
focusNextBlood();
break;
}
default:
return;
}
}
function getRating() {
return rating;
}
return { getRating, getBloodComponent };
}
const ratingModule = makeHungerRating();
const bloodComponent = ratingModule.getBloodComponent();
const container = document.querySelector("ul");
container.append(bloodComponent);
const ratingText = document.querySelector(".hunger__level--description")
ratingText.innerHTML = getRatingTextHTML(container)
function getRatingTextHTML(ratingModule) {
let hunger = ratingModule
if (hunger = 0) {
return `<div class="hunger__level--description">"I sleep, for now. You have satisfied me... but never forget, I am always here. Enjoy your peace, little one - it never lasts."</div>
</div>`
}
else if (hunger = 1) {
return `<div class="hunger__level--description">"I feel the pull again. Just a taste... you can manage that, can't you? Just enough to remind me that you know what I need"</div>
</div>`
}
else if (hunger = 2) {
return `<div class="hunger__level--description">"You're making me wait too long. Don't you feel it? That ache in your veins... I do. It's time. Find them. Feed. I won't ask nicely again."</div>
</div>`
}
else if (hunger = 3) {
return `<div class="hunger__level--description">"I'm starving! Do you really think you can hold me back? I can smell them all around us, their warmth, their blood. I will have it, one way or another... you won't stop me!"</div>
</div>`
}
else if (hunger = 4) {
return `<div class="hunger__level--description">"ENOUGH! You're nothing without me! I will tear them apart! They're just cattle, waiting to be slaughtered, and you're a fool if you think you can resist me any longer! YOU. WILL. FEED!"</div>
</div>`
}
}
});
所以我在上面发布了 JS，我会重申我已经尝试过针对 ratingModule、bloodComponent、container、blood，并且我已将其运行为
blood.forEach [
"I sleep, for now. You have satisfied me... but never forget, I am always here. Enjoy your peace, little one - it never lasts.",
"I feel the pull again. Just a taste... you can manage that, can't you? Just enough to remind me that you know what I need",
"You're making me wait too long. Don't you feel it? That ache in your veins... I do. It's time. Find them. Feed. I won't ask nicely again."
"I'm starving! Do you really think you can hold me back? I can smell them all around us, their warmth, their blood. I will have it, one way or another... you won't stop me!"
"ENOUGH! You're nothing without me! I will tear them apart! They're just cattle, waiting to be slaughtered, and you're a fool if you think you can resist me any longer! YOU. WILL. FEED!"
]
但说实话，我不知道我是否正确实现了这一点。这个想法是在我更改饥饿等级时让文本显示在饥饿等级下方。
HTML 和 CSS 已经给出了饥饿评级下显示的文本状态，但当我点击不同的评级时它不会改变。
这是通过你期望/想要发生的事情进行逆向思考并测试未发生情况的良好实践。
浏览一下你可以看到在
onClickrenderChangesgetRatingTextHTMLgetRatingTextHTML因此，您需要的是查看您的点击功能，并决定要在其中调用
getRatingTextHTML