英文:
How do i display texts to a particular sentence in the HTML using event-listener in javascript?
问题
以下是您要翻译的内容：
"我在处理一个特定项目的DOM时遇到了困难。
我的目标是在单击时获取每张卡片的标题，并显示在下方的摘要空白处：“订单摘要”。
遇到的问题：
- 前三张卡片是唯一正常工作的，而其余卡片在尝试使用console.log时一直抛出类型错误，我无法找到问题所在，因为控制台在每次单击时都显示了每个卡片的详细信息。但当我尝试显示除前三张卡片之外的特定卡片的innerText时，它会在单击这些卡片时抛出错误，但在前三张卡片上却正常工作，我不知道这是如何可能的，因为前三张卡片之后都没有任何类。
我将在下面提供代码，我已经稍微进行了一些样式设置，以便您可以在CodePen上复制并粘贴进行测试。非常感谢。
以下是HTML代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="steps__wrapper">
<div class="steps__track plans__option">
<div class="steps__title">
<h1>How do you drink your coffee?</h1>
<img src="images/icon-arrow.20551347.svg" alt="arrow icon" class="arrow-icon">
</div>
<div class="plan-option-container">
<div class="plan-wrapper">
<div class="product__plan">
<h2 class="product__plan--title brewed-type">Capsule</h2>
<p class="product__plan--description">Compatible with Nespresso systems and similar brewers</p>
</div>
<div class="product__plan">
<h2 class="product__plan--title brewed-type">Filter</h2>
<p class="product__plan--description">For pour over or drip methods like Aeropress, Chemex, and V60</p>
</div>
<!-- 还有更多卡片 -->
</div>
</div>
</div>
<!-- 其他步骤和卡片 -->
<div class="summary">
<h1 class="summary__title">ORDER SUMMARY</h1>
<p>
“我会喝<span class="drink-style style">_____</span>，用<span class="type style">_____</span> 类别
的咖啡豆。<span class="quantity style">_____</span> 磨成<span class="grind style">_____</span>，寄给我<span class="delivery style">_____</span>。”</span>
</p>
</div>
</div>
</div>
</body>
</html>
我对CSS进行了一些快速样式设置，以帮助您更快地解决问题：
.plan-wrapper {
display: flex;
justify-content: space-between;
}
.product__plan {
border: 1em solid red;
background: red;
margin: 1em;
}
JavaScript代码如下：
let planCards = document.getElementsByClassName("product__plan");
let brewedTypes = document.getElementsByClassName("brewed-type");
let coffeeTypes = document.querySelectorAll(".coffee-type");
let coffeeQuantity = document.getElementsByClassName("coffee-quantity");
let coffeeProcess = document.getElementsByClassName("coffee-process");
let coffeeDelivery = document.getElementsByClassName("coffee-delivery");
for (let i = 0; i < planCards.length; i++) {
planCards[i].addEventListener("click", () => {
// 获取元素的innerText并显示在订单摘要中
let brewedTypesEl = brewedTypes[i].innerText;
document.querySelector(".drink-style").innerText = brewedTypesEl;
let coffeeTypesEl = coffeeTypes[i].innerText;
document.querySelector(".type").innerText = coffeeTypesEl;
let coffeeQuantityEl = coffeeQuantity[i].innerText;
document.querySelector(".quantity").innerText = coffeeQuantityEl;
let coffeeProcessEl = coffeeProcess[i].innerText;
document.querySelector(".grind").innerText = coffeeProcessEl;
let coffeeDeliveryEl = coffeeDelivery[i].innerText;
document.querySelector(".delivery").innerText = coffeeDeliveryEl;
});
}
希望这可以帮助您解决问题。
英文:
I am having difficulty working with DOM for a paticular project that i am working on.
My goal is to get the header name of each cards when clicked and displaying in the blank space of the summary below it "Order Summary.
Problem Encoutered:
- The first three cards are the only ones working right while the rest keeps throwing type error when i tried using console.log and i couldn't find what the issue is cause console showed me each individual details for the cards at each click but when i try to display the innertext of a particular cards aside the first three cards, it throws error when i click on the those cards but works fine with the first three cards which i do not know how that was even possible since the first three cards do not own any of the classes after them.
I will be providing the code below of which i have given a little style in case you want to copy and paste on code pen to test. Thank you so much.
Here is the HTML CODE
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="steps__wrapper">
<div class="steps__track plans__option">
<div class="steps__title">
<h1>How do you drink your coffee?</h1>
<img src="images/icon-arrow.20551347.svg" alt="arow icon" class="arrow-icon">
</div>
<div class="plan-option-container">
<div class="plan-wrapper">
<!--I ADDED EVENT LISTENER TO THE CARD-->
<!--THERE ARE 15 CARDS IN TOTAL-->
<div class="product__plan">
<!--H2 HERE IS THE TITLE CLASS I WANT TO EXTRACT-->
<h2 class="product__plan--title brewed-type">Capsule</h2>
<p class="product__plan--description">Compatible with Nespresso systems and similae brewers</p>
</div>
<div class="product__plan">
<h2 class="product__plan--title brewed-type">Filter</h2>
<p class="product__plan--description">For pour over or drip methods like Aeropress, Chemex, and V60</p>
</div>
<div class="product__plan">
<h2 class="product__plan--title brewed-type">Espresso</h2>
<p class="product__plan--description">Dense and finely ground beans for an intense, flavoful experience</p>
</div>
</div>
</div>
</div>
<div class="steps__track plans__option">
<div class="steps__title">
<h1>What type of coffee?</h1>
<img src="images/icon-arrow.20551347.svg" alt="arow icon" class="arrow-icon">
</div>
<div class="plan-option-container">
<div class="plan-wrapper">
<div class="product__plan">
<h2 class="product__plan--title coffee-type" >Single Origin</h2>
<p class="product__plan--description">Distinct, high quality coffee from a specific family-owned farm.</p>
</div>
<div class="product__plan">
<h2 class="product__plan--title coffee-type" >Decaf</h2>
<p class="product__plan--description">Just like regular coffee, except the caffeine has been removed</p>
</div>
<div class="product__plan">
<h2 class="product__plan--title coffee-type" >Blended</h2>
<p class="product__plan--description">Combination of two or three dark roasted beans of organic coffees</p>
</div>
</div>
</div>
</div>
<div class="steps__track plans__option">
<div class="steps__title">
<h1>How much would you like</h1>
<img src="images/icon-arrow.20551347.svg" alt="arow icon" class="arrow-icon">
</div>
<div class="plan-option-container">
<div class="plan-wrapper">
<div class="product__plan ">
<h2 class="product__plan--title coffee-quantity">250g</h2>
<p class="product__plan--description">Perfect for the solo drinker. Yield about 12 delicious cups.</p>
</div>
<div class="product__plan ">
<h2 class="product__plan--title coffee-quantity">500g</h2>
<p class="product__plan--description">Perfect option for a couple. Yields about 40 delectable cups.</p>
</div>
<div class="product__plan ">
<h2 class="product__plan--title coffee-quantity">1000g</h2>
<p class="product__plan--description">Perfect for offices and events. Yield about 90 delightful cups.</p>
</div>
</div>
</div>
</div>
<div class="steps__track plans__option grinding">
<div class="steps__title">
<h1>Want us to grind them?</h1>
<img src="images/icon-arrow.20551347.svg" alt="arow icon" class="arrow-icon">
</div>
<div class="plan-option-container">
<div class="plan-wrapper">
<div class="product__plan">
<h2 class="product__plan--title coffee-process">Wholebean</h2>
<p class="product__plan--description">Best choice if you cherish the full sensory experience</p>
</div>
<div class="product__plan">
<h2 class="product__plan--title coffee-process">Filter</h2>
<p class="product__plan--description">For drip or pour-over coffee methods such as V60 or Aeropresso</p>
</div>
<div class="product__plan">
<h2 class="product__plan--title coffee-process" >
Cafetiére</h2>
<p class="product__plan--description">Course ground beans specially suited for french press coffee</p>
</div>
</div>
</div>
</div>
<div class="steps__track plans__option">
<div class="steps__title">
<h1>How often do we deliver?</h1>
<img src="images/icon-arrow.20551347.svg" alt="arow icon" class="arrow-icon">
</div>
<div class="plan-option-container">
<div class="plan-wrapper">
<div class="product__plan ">
<h2 class="product__plan--title coffee-delivery">Every week</h2>
<p class="product__plan--description price-plan"><span class="price">$7.20</span> per shipment. Includes free first-class shipping</p>
</div>
<div class="product__plan ">
<h2 class="product__plan--title coffee-delivery">Every 2 week</h2>
<p class="product__plan--description price-plan"><span id="price">$9.60</span> per shipment. Includes free priority shipping.</p>
</div>
<div class="product__plan ">
<h2 class="product__plan--title coffee-delivery">Every month</h2>
<p class="product__plan--description price-plan"><span id="price">$12.00</span> per shipment includes free priority shipping</p>
</div>
</div>
</div>
<div class="summary">
<!--ORDER SUMMARY WHERE I WANT TO DISPLAY THE INNERTEXT TAKEN FROM THE TITLE-->
<h1 class="summary__title">ORDER SUMMARY</h1>
<p>
“I drink my coffee as <span class="drink-style style">_____</span>, with a <span class="type style"> _____</span> type
of bean. <span class="quantity style">_____</span> ground ala <span class="grind style">_____</span> , sent to me<span class="delivery style">_____</span>.”</span>
</p>
</div>
</div>
</div>
</body>
</html>
"
I gave the CSS a little quick styling to help you help me figure my problem out faster
.plan-wrapper{
display:flex;
justify-content:space-between;
}
.product__plan{
border.1em solid red;
background:red;
margin:1em ;
}
The javscript code:
let planCards=document.getElementsByClassName("product__plan")
let brewedTypes=document.getElementsByClassName("brewed-type")
let coffeeTypes=document.querySelectorAll(".coffee-type")
let coffeeQuantity=document.getElementsByClassName("coffee-quantity")
let coffeeProcess=document.getElementsByClassName("coffee-process")
let coffeeDelivery=document.getElementsByClassName("coffee-delivery")
for(let i=0;i<planCards.length;i++){
planCards[i].addEventListener("click",()=>{
//GET THE INNERTEXT OF THE ELEMENT AND DISPLAY IT THE ORDER SUMMARY
let brewedTypesEl=brewedTypes[i].innerText
document.querySelector(".drink-style").innerText=brewedTypesEl
let coffeeTypesEl=coffeeTypes[i].innerText
document.querySelector(".type").innerText=coffeeTypesEl
let coffeeQuantityEl=coffeeQuantity[i].innerText
document.querySelector(".quantity").innerText=coffeeQuantityEl
let coffeeProcessEl=coffeeProcess[i].innerText
document.querySelector(".grind").innerText=coffeeProcessEl
let coffeeDeliveryEl=coffeeDelivery[i].innerText
document.querySelector(".delivery").innerText=coffeeDeliveryEl
})
}```
</details>
# 答案1
**得分**: 0
你的代码问题在于你尝试使用相同的索引访问不同数组的元素。在你的情况下，brewedTypes、coffeeTypes、coffeeQuantity、coffeeProcess 和 coffeeDelivery 数组的长度不同，但你尝试在事件监听回调函数中使用相同的索引访问它们的元素。
数组 planCards 由所有 .product__plan 元素组成，总共有 15 张卡片，而其他数组 brewedTypes、coffeeTypes、coffeeQuantity、coffeeProcess 和 coffeeDelivery 的长度不等于 15。因此，在这些数组的长度之外的索引处，你会得到一个错误。
一个解决方案是确保每个卡片只监听点击事件，以更新订单摘要的相应部分。
像这样：
```javascript
let planCards = document.getElementsByClassName("product__plan")
// 获取卡片标题的函数
const getTitle = (element) => {
return element.querySelector('.product__plan--title').innerText;
}
for (let i = 0; i < planCards.length; i++) {
planCards[i].addEventListener("click", () => {
let title = getTitle(planCards[i]);
// 根据标题的类别将标题分配到摘要的正确部分
if (planCards[i].querySelector('.product__plan--title').classList.contains('brewed-type')) {
document.querySelector(".drink-style").innerText = title;
} else if (planCards[i].querySelector('.product__plan--title').classList.contains('coffee-type')) {
document.querySelector(".type").innerText = title;
} else if (planCards[i].querySelector('.product__plan--title').classList.contains('coffee-quantity')) {
document.querySelector(".quantity").innerText = title;
} else if (planCards[i].querySelector('.product__plan--title').classList.contains('coffee-process')) {
document.querySelector(".grind").innerText = title;
} else if (planCards[i].querySelector('.product__plan--title').classList.contains('coffee-delivery')) {
document.querySelector(".delivery").innerText = title;
}
})
}
每当点击卡片时，都会调用 getTitle 函数以获取卡片标题的文本。然后，它检查标题包含的类别，然后更新订单摘要的相应部分。这个解决方案确保只有在点击卡片时才更新订单摘要的适当部分。
英文:
The issue with your code is that you are trying to access elements from different arrays with the same index. In your case, the brewedTypes, coffeeTypes, coffeeQuantity, coffeeProcess, and coffeeDelivery arrays have different lengths, yet you're trying to access their elements using the same index within the event listener callback function.
The array planCards is composed of all the .product__plan elements which sum up to 15 cards while the other arrays: brewedTypes, coffeeTypes, coffeeQuantity, coffeeProcess, and coffeeDelivery have lengths that are not equal to 15. Thus, for indices beyond the length of these arrays, you get an error.
A solution would be to ensure that each card only listens for the click event to update the appropriate part of the order summary.
Like so:
let planCards = document.getElementsByClassName("product__plan")
//Function to get the title of a card
const getTitle = (element) => {
return element.querySelector('.product__plan--title').innerText;
}
for (let i = 0; i < planCards.length; i++) {
planCards[i].addEventListener("click", () => {
let title = getTitle(planCards[i]);
//Assign the title to the correct part of the summary based on the class of the title
if (planCards[i].querySelector('.product__plan--title').classList.contains('brewed-type')) {
document.querySelector(".drink-style").innerText = title;
} else if (planCards[i].querySelector('.product__plan--title').classList.contains('coffee-type')) {
document.querySelector(".type").innerText = title;
} else if (planCards[i].querySelector('.product__plan--title').classList.contains('coffee-quantity')) {
document.querySelector(".quantity").innerText = title;
} else if (planCards[i].querySelector('.product__plan--title').classList.contains('coffee-process')) {
document.querySelector(".grind").innerText = title;
} else if (planCards[i].querySelector('.product__plan--title').classList.contains('coffee-delivery')) {
document.querySelector(".delivery").innerText = title;
}
})
}
When each card is clicked, the function getTitle is called to get the inner text of the title of the card. It then checks which class the title contains and then updates the appropriate part of the order summary. This solution ensures that only the appropriate part of the order summary is updated when a card is clicked.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论