Recently I delved into learning JavaScript and stumbled upon a coding problem that has me stumped!
I'm looking for a way to display information in the blue area after selecting an option, showing details like the name of the food item and its price.
If anyone can provide guidance on how to proceed with this task, I would greatly appreciate it. Thank you in advance for your help!
let plan = document.querySelector('.paln');
let price = document.querySelector('.price');
let item = document.querySelectorAll('.item');
for (var i = 0; i < item.length; i++) {
item[i].addEventListener('click', showplan, false);
}
function showplan() {
console.log('hello')
}.product＿list {
display: flex;
}
.product＿list .item {
border: 1px solid #ccc;
border-radius: 6px;
text-align: center;
padding: 20px;
margin: 20px;
}
.product＿list .item h2 {
margin-bottom: 16px;
}
.product＿list .item:hover {
border: 1px solid #222;
}
.product＿list .bold {
border: 3px solid;
}
.show {
border: 2px solid blue;
padding: 20px;
}<ul class="product＿list">
<li class="item">
<h2>coke</h2>
<p>$100</p>
</li>
<li class="item">
<h2>fries</h2>
<p>$600</p>
</li>
</ul>
<h2 class="show">Your food of choice is<span class="plan"></span>price is<span class="price"></span></h2>