从输入中读取，搜索多个输入并动态打印它们

Question

大家好，我不能用html和javascript做练习。如何从输入中读取多个输入并动态地打印它们？例如，如果我在搜索栏中作为输入写入“标记”，则要打印“标记”。如果我在搜索栏中写"helen"，我想打印："mark"，"helen"，如果我写"gessy"，我想打印"mark"，"helen“，"gessy”等等。

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

您可以使用一个数组来保存来自您输入的条目。然后通过循环遍历数组并创建一个标记来保存每个条目并将其附加到页面<p>元素，从而在页面上显示它们。

将数据保存到数组/对象的好处意味着以后还可以引用该数据。

参见snippit作为一个例子。

​

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>

​

或者您可以直接在页面上显示条目，而不必将输入保存到某种数组/object/等等.

参见snippit作为一个例子。

​

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>

​

Answer 2

有多种方法可以完成此练习。我决定用当地的储藏室。保存前一个搜索状态非常重要，因为它需要在下一个函数调用中使用。

我使用的不是元素变量，而是oldElement和newElement，希望它们能够自我解释。

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

}

注意，我已经注释掉了createTextNode，因为这个函数没有在问题中定义。

这里，在本地存储中，数组被创建为数据，新值被存储到其中。我还冒昧地创建了一个段落元素来显示搜索结果。

我在这里托管了这段代码，试着使用它-- https://stackblitz.com/edit/js-eamamp?file=index.html,index.js