时间戳

首页 > 解决方案 > 使用 Javascript 或 jQuery 从文本框输入创建数组，并可以删除数组元素 onClick

javascript - 使用 Javascript 或 jQuery 从文本框输入创建数组，并可以删除数组元素 onClick

问题描述

如果用户一次输入更多单词，请将它们转换为数组元素并显示在文本框下方，并可以删除（点击时）。

这是我到目前为止所尝试的：

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>

我正在努力在输出数组上制作小边框并在点击时删除它们。这是它的样子：

它应该是什么样子

标签： javascripthtmljquery

解决方案

相信您可以使用本站进行咨询。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>

推荐阅读