Question

所以我想做的就是

1.add添加输入框的功能

2.删除功能以删除列表中的最后一个输入框

3.sort函数按字母顺序对输入文本列表进行排序

我认为我的添加功能正在运行，但是当我尝试删除最后一个输入框或尝试对其进行排序时，我遇到了问题。任何想法或建议将非常感谢。感谢

＆＃13;

<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>

＆＃13;

Answer 1

看起来你的add函数将输入直接添加到body，而sort函数正在查找['mainform']元素形式的元素。

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

Answer 2

那就可以胜任：

＆＃13;

    <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>

＆＃13;

请注意，我已将button元素替换为input元素，以防止提交表单。

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

使用javascript添加，删除输入框

2 个答案: