添加，使用JavaScript删除输入框

1.新增功能，增加一个输入框

2.取出功能删除最后一个输入框列表

3.sort功能由字母顺序排序输入文本列表

我觉得我的附加功能正在工作，但我遇到了问题，当我试图删除最后一个输入框或者试图进行排序它。任何想法或建议将非常感激。感谢

<form id="mainform" > 
 
<button onclick="add()">add</button> 
 
<button onclick="remove()">remove</button> 
 
<button onclick="sort()">sort</button> 
 
</form> 
 

 
<script> 
 
    var i = 0; 
 
    var count =0; 
 
    function add() { 
 
     var x= document.createElement("INPUT"); 
 
     x.setAttribute("type", "text"); 
 
     x.setAttribute("placeholder", "Name"); 
 
     i += 1; 
 
     count=count+1; 
 
     document.body.appendChild(x); 
 
    }  
 
    function remove(){ 
 
     i -= 1; 
 
     count=count-1; 
 
    } 
 
    
 
    function sort(){ 
 
     var x; 
 
     x=count; 
 
     var strings=[] 
 
     var t; 
 
     var i=0; 
 
     t=x; 
 
     while(t!=0){ 
 
       strings.push(document.forms["mainform"].elements[i].value); 
 
       t=t-1; 
 
       i=i+1} 
 
    
 
     strings=strings.sort() 
 
     var j=0; 
 
     var msg=''; 
 
     while(x!=0){ 
 
       var msg=msg+strings[j]+'\n'; 
 
       document.forms["mainform"].elements[j].value=strings[j]; 
 
       j=j+1; 
 
       x=x-1;} 
 
    } 
 
</script>

来源

2017-02-27 Tony1155

请显示任何错误消息或陈述它为什么不起作用。 – Turtle

您的移除功能对元素没有做任何操作，如果您不想将其显示给用户，则可以将显示设置为无，以隐藏它们。 –

看起来像你的附加功能，直接增加了输入的身体，而你的排序功能，寻找形式[“的MainForm”]元素的元素。

你的删除函数只是递减你的迭代器，根本不影响表单。

来源

2017-02-27 01:35:23 Paul

这将做的工作：

<form id="mainform" > 
 
    <input type="button" value="add" onclick="add()"></input> 
 
    <input type="button" value="remove" onclick="remove()"></input> 
 
    <input type="button" value="sort" onclick="sort()"></input> 
 
    </form> 
 
    
 
    <script> 
 
     function add() { 
 
      var x= document.createElement("INPUT"); 
 
      x.setAttribute("type", "text"); 
 
      x.setAttribute("placeholder", "Name"); 
 
      x.setAttribute("class", "someInput"); 
 
      document.body.appendChild(x); 
 
     } 
 
     
 
     function remove() { 
 
      var childs = document.body.getElementsByClassName("someInput"); 
 
      if(childs.length > 0) { 
 
      document.body.removeChild(childs[childs.length - 1]); 
 
      } 
 
     } 
 
     
 
     function sort(){ 
 
      var hash = {}; 
 
      var childs = document.body.getElementsByClassName("someInput"); 
 
      
 
      // Map each element to its value 
 
      for(var i = 0; i < childs.length; i++) { 
 
      var currentElement = childs[i]; 
 
      hash[currentElement.value] = currentElement; 
 
      } 
 
      
 
      // Remove all added elements 
 
      for(var i = 0; i < childs.length; i++) { 
 
      var currentElement = childs[i]; 
 
      document.body.removeChild(currentElement); 
 
      } 
 
      
 
      // Sort by map keys, and add all elements back sorted 
 
      Object.keys(hash).sort().forEach(function(v, i) { 
 
      document.body.appendChild(hash[v]); 
 
      }); 
 
     } 
 
    </script>

请注意，我更换了button元素与input要素，以防止表单被提交。

另外请注意，我用类名为“someInput”标记每个插入的文本框。当我们想要查询并获取所有插入的文本框时，这将使我们的生活更轻松。

来源

2017-02-27 02:28:07 gipouf

添加，使用JavaScript删除输入框

回答

相关问题