How do I create a variable which logs the input from other variables?

Question

New coder here. I have a shopping list app I am putting together. I am trying to have the input from the three fields ("item", "store", and "date") appended at the bottom of the page as a single line item.

I tried to do this by creating a variable ("threeItems") which comprises of the input of the three input fields. But this did not work.

I suspect the fix will be something simple and I will kick myself for not having figured it out. But im stumped right now. My code is below:

let itemInput = document.getElementById("item-input");
let storeInput = document.getElementById("store-input");
let dateInput = document.getElementById("date-input");
let listArea = document.getElementById("list-container");
let addButton = document.getElementById("submit");
let threeItems = ("itemInput", "storeInput", "dateInput");

addButton.addEventListener("click", function() {
  var newItem = document.createElement("li");
  newItem.innerText = threeItems.value;
  listArea.appendChild(newItem);
  threeItems.value = "";
});

<h1>Shopping List</h1>
<div class="inputArea">
  <div>
    <h3 id="item">item:</h3>
    <input type="text" id="item-input" placeholder="Add item here">
  </div>
  <div>
    <h3 id="store">Store:</h3>
    <input type="text" id="store-input" placeholder="e.g Costco, Superstore, etc.">
  </div>
  <div>
    <h3 id="date">Date</h3>
    <input type="text" id="date-input" placeholder="Add date for shopping run here">
  </div>
</div>
<br>
<div>
  <button id="submit">Submit</button>
</div>
<div id="list-container">
</div>

Answer 1

This is most likely what you need. You need to get the elements the moment you click the button, not before that when they are empty

let listArea = document.getElementById("list-container");
let addButton = document.getElementById("submit");

addButton.addEventListener("click", function() {
  let itemInput = document.getElementById("item-input");
  let storeInput = document.getElementById("store-input");
  let dateInput = document.getElementById("date-input");
  let threeItems = itemInput.value + ' ' + storeInput.value + ' ' + dateInput.value;
  var newItem = document.createElement("li");
  newItem.innerHTML = threeItems;
  listArea.appendChild(newItem);
});

<h1>Shopping List</h1>
<div class="inputArea">
  <div>
    <h3 id="item">item:</h3>
    <input type="text" id="item-input" placeholder="Add item here">
  </div>
  <div>
    <h3 id="store">Store:</h3>
    <input type="text" id="store-input" placeholder="e.g Costco, Superstore, etc.">
  </div>
  <div>
    <h3 id="date">Date</h3>
    <input type="text" id="date-input" placeholder="Add date for shopping run here">
  </div>
</div>
<br>
<div>
  <button id="submit">Submit</button>
</div>
<div id="list-container">
</div>