HTMLテキストボックスに値を追加します

テキストボックスに値を追加します。既定値が10のテキストボックスが既に作成されている場合は、ボタンを使用して、制限付きの新しいテキストボックスを追加します。したがって、値を連続して追加します。テキストボックス1からテキストボックス4HTMLテキストボックスに値を追加します

例：

テキストボックス1つの値= 10

テキストボックス2値= 20

テキストボックス3値= 30

テキストボックス4値= 40

どうすればいいですか？

<script type="text/javascript"> 
    //Adding New Line Item Function 
    var i = 1; 
    function AddNew(){ 
     if (i <=3){ //if you don't want limit, you remove IF condition 
      i++; 
      var div= document.createElement('div'); 
      div.innerHTML = '<input type="text" name="lineitem_'+i+'" maxlength="2" size="2"><input type="button" onclick="removeKid(this)" value="-">'; 
      document.getElementById('addingitem').appendChild(div); 
     } 
    } 
</script>

出典

2016-06-02 Ratana

あなたはとてもwhileループがより優れている、テキストボックス1のテキストボックス4に連続的に値を追加したいここ

var i = 1; 
    function AddNew(){ 
     while(i < 4){ 
      i++; 
      var div = document.getElementById("addingitem"); 
      div.innerHTML += '<br>Text box '+i+' <input type="text" name="lineitem_'+i+'" maxlength="2" size="2" value="'+i*10+'"><input type="button" onclick="removeKid(this)" value="-">';    
     } 
    }

出典

2016-06-02 03:36:53

次のステップテキストボックスを削除する関数を使用します。しかし、テキストボックスの中央を削除すると、値は結果を示します。function removeKid（div）{ \t \t document.getElementById（ 'addingitem'）。removeChild（div.parentNode）; \t \t i--;\t}テキストボックス1の値= 10、テキストボックス2の値= 20、テキストボックス3の値= 30、次にテキストボックス2を削除すると、テキストボックス3の値は20に変わりません。より多くのテキストボックスがありますが、値は30です。テキストボックス3と新しいテキストボックスの2倍の値です。 – Ratana

このような使用を....

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
</head> 
<body> 
<div id="textboxes"> 
    Text box 1 <input type="text" value="10" /> 
</div> 

<button onclick="AddNew()" >Add</button> 
<script type="text/javascript"> 
    //Adding New Line Item Function 
    var i = 1; 
    function AddNew(){ 
    var div= document.getElementById('textboxes'); 
     if (i <4){ 
      i++;    
      div.innerHTML = div.innerHTML+'<br>Text box '+i+' <input type="text" value="'+i*10+'" />'; 

     } 
    } 
</script> 
</body> 
</html>

出典

2016-06-02 03:08:42 Mani

この合計で5つのボックスが追加されます。また、このような「追加」のために 'Element.insertAdjacentHTML'を使ってみてください。 –

が4つのボックスに変更されました。なぜElement.insertAdjacentHTMLを使用する必要がありますか？説明していただけますか？ – Mani

HTMLテキストボックスに値を追加します

答えて

関連する問題