read from an input search multiple inputs and print them dynamically-CodePudding

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  >           
      <form  role="search">
      <input  id="form-control me-2" type="search" placeholder="Search" aria-label="Search"> //here I write the inputs
      <button  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
                 
}

CodePudding user response：

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 >
  <form  role="search">
    <input  id="form-control me-2" type="search" placeholder="Search" aria-label="Search"> //here I write the inputs
    <button  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 >
  <form  role="search">
    <input  id="form-control me-2" type="search" placeholder="Search" aria-label="Search"> //here I write the inputs
    <button  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>

CodePudding user response：

There are multiple ways you can complete this exercise. I've decided to use the local storage. It's important save the previous search state as it is required to be used on the next function call.

Rather than using element variable I'm using oldElement and newElement hoping they may self explain.

send_tocontainer = () => {
  let newElement = document.getElementById("form-control me-2").value;

  if (!localStorage.getItem('data')) {
    localStorage.setItem('data', '[]');
  }
  let oldElement = JSON.parse(localStorage.getItem('data'));
  oldElement.push(newElement);

  localStorage.setItem('data', JSON.stringify(oldElement));


  let serchContent = document.createElement("p");
  serchContent.innerText = oldElement.toString();
  document.body.appendChild(serchContent);

  // let newnode = document.createElement("p");
  // const textnode = newnode.createTextNode(element);
  // newnode.appendChild(textnode);
  // document.getElementById("testo").innerHTML = element

}

notice I have commented out the createTextNode as the function aren't defined in the question.

Here in local storage an array is created as data and new values are stored in to it. I also took liberty of creating a paragraph element to display your search results.

I've hosted this code here try to play around with it https://stackblitz.com/edit/js-eamamp?file=index.html,index.js