If using javascript to get information on click, put it in another field-CodePudding

I just learned javascript and encountered a problem, do not know how to write!

I hope that after clicking one of the options, the information on the selected option, such as the food name and price, can be brought to the blue area to display! But I don't know how to proceed, I hope everyone can help, thank you.

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 >
  <li >
    <h2>coke</h2>
    <p>$100</p>
  </li>
  <li >
    <h2>fries</h2>
    <p>$600</p>
  </li>
</ul>

<h2 >Your food of choice is<span ></span>price is<span ></span></h2>

CodePudding user response：

If you click on either of the buttons it activates a function that changes the contents of .show

document.getElementById("item1").addEventListener('click', () => {document.querySelector(".show").innerText = "Your food of choice is Coke Price is $100";})
document.getElementById("item2").addEventListener('click', () => {document.querySelector(".show").innerText = "Your food of choice is Fries Price is $600";})

.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 >
  <li  id="item1">
    <h2>coke</h2>
    <p>$100</p>
  </li>
  <li  id="item2">
    <h2>fries</h2>
    <p>$600</p>
  </li>
</ul>

<h2 >Your food of choice is<span ></span> price is<span ></span></h2>

CodePudding user response：

you needs get the object clicked, so if you click at any where of <li> your target goings to be the h2 or <p> so you need search the closest <li> tag.

let plan = document.querySelector('.plan');
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(e) {
  const planSelected = e.target.closest('li').querySelector('h2');
  const priceSelected = e.target.closest('li').querySelector('p');
  plan.innerHTML = planSelected.innerHTML;
  price.innerHTML = priceSelected.innerHTML;
}