read from an input search multiple inputs and print them dynamically

Question

Hello everyone I can't do an exercise in html and javascript. How can I read from an input search multiple inputs and print them dynamically? for example if I write as input in the search bar "mark" I want to print "mark". If I then write "helen" in the search bar, I want to print: "mark", "helen", if I then write "gessy", I want to print "mark", "helen", "gessy" and so on.

page.html

<div class="container-fluid" >           
      <form class="d-flex" role="search">
      <input class="form-control me-2" id="form-control me-2" type="search" placeholder="Search" aria-label="Search"> //here I write the inputs
      <button class="btn btn-outline-success" type="button" onclick="send_tocontainer()">Search</button> //when i click the button i see all input value write from users
            </form></div>
<div id="container-dx" >
    <p id="text"></p>
</div>

script.js

function send_tocontainer(){
  let element=document.getElementById("form-control me-2").value;
           let newnode= document.createElement("p");
          const textnode= newnode.createTextNode(element)
  newnode.appendChild(textnode);
  document.getElementById("testo").innerHTML=element
                 
}

Answer 1

You could use an array to save the entries coming from your input. Then display them on the page by looping over that array and creating a tag to hold each entry and append it to your pages <p> element.

The benefit of saving the data to an array/object means you could also reference that data later.

See the snippit for an example.

const btn = document.querySelector('.btn')
const search = document.querySelector('form .me-2')
const textEl = document.getElementById('text')
const searchValues = []

const searchResults = (e) => {
  // push the values into an array 
  searchValues.push(search.value)
  // iterate over the array
  searchValues.forEach((val, i) => {
    // create a span tag to hold the display text from the array
    let span = document.createElement('span')
    // style the span so it is block element
    span.style.display = 'block'
    // is this the last iteration through, which would be the last entry into the form by user
    // yes, then set the last value in the array to the textContent of our newly created span tag
    i === searchValues.length - 1 ? span.textContent = searchValues[searchValues.length-1] : null
    // append the text element
    textEl.appendChild(span)
  })
}

// event listener for button
btn.addEventListener('click', searchResults)

<div class="container-fluid">
  <form class="d-flex" role="search">
    <input class="form-control me-2" id="form-control me-2" type="search" placeholder="Search" aria-label="Search"> //here I write the inputs
    <button class="btn btn-outline-success" type="button">Search</button> //when i click the button i see all input value write from users
  </form>
</div>
<div id="container-dx">
  <p id="text"></p>
</div>

Or you could just display the entries directly on the page without saving the input to some kind of array/object/etc...

See the snippit for an example.

const btn = document.querySelector('.btn')
const search = document.querySelector('form .me-2')
const textEl = document.getElementById('text')

const searchResults = (e) => {
  let span = document.createElement('span')
  span.style.display = 'block'
  span.textContent = search.value
  textEl.appendChild(span)
}

btn.addEventListener('click', searchResults)

<div class="container-fluid">
  <form class="d-flex" role="search">
    <input class="form-control me-2" id="form-control me-2" type="search" placeholder="Search" aria-label="Search"> //here I write the inputs
    <button class="btn btn-outline-success" type="button">Search</button> //when i click the button i see all input value write from users
  </form>
</div>
<div id="container-dx">
  <p id="text"></p>
</div>