If the user enters more words at once, convert them in array elements and show below the textbox with the possibility to remove (on click).

Here is what I tried so far:

let names   = [];
let nameInput   = document.getElementById("name");
let messageBox  = document.getElementById("display");

function insert ( ) {
 
 names.push( nameInput.value );


 clearAndShow();
}

function clearAndShow () {
  
  nameInput.value = "";
 

  messageBox.innerHTML = "";

  messageBox.innerHTML  = "Names: "   names.join(", ")   "<br/>";
 
}

  <form>
    <h1>Please enter data</h1>
    <input id="name" type="text" />
    <input type="button" value="Search" onclick="insert()" />
    <input type="button" value="Show data" onclick="show()" />
  </form>
  <div id="display"></div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I'm struggling to make the little border on the output array and to delete them on click. Here is how it should look like:

How it should look like

CodePudding user response：

I believe you can use this site for consultation.https://www.w3schools.com/jsref/

    let names   = [];
    let nameInput   = document.getElementById("name");
    let messageBox  = document.getElementById("display");
    function insert ( ) {
     names.push( nameInput.value );
     clearAndShow();
    }
    function clearAndShow () {      
      nameInput.value = "";
      messageBox.innerHTML = "";
      names.forEach(function(element){
        if(element != ''){
            var _span = document.createElement('span');
                 _span.style.borderStyle = "solid"
           _span.style.width = '50px'
            _span.appendChild(document.createTextNode(element))
          messageBox.appendChild(_span)
        }  
      })
    }

<form>
  <h1>Please enter data</h1>
  <input id="name" type="text" />
  <input type="button" value="Search" onclick="insert()" />
  <input type="button" value="Show data" onclick="show()" />
</form>
<div id="display"></div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>