添加，使用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刪除輸入框

回答

相關問題