Question 44719 in Html Question posted in
Some basic documentation can be found here.

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

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>
Tags:

2

Answers


  1. 0

    In the click event you need to read the values of the text elements.

    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");
// Changed to an array of names
let threeItems = ["item-input", "store-input", "date-input"];

addButton.addEventListener("click", function() {
  var newItem = document.createElement("li");
  // Collect the values into a new array
  var texts = threeItems.map(name => document.getElementById(name).value);
  // Convert array to string
  newItem.innerText = texts.join("-");
  listArea.appendChild(newItem);
  // Reset values
  threeItems.forEach(name => document.getElementById(name).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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search