0

画像をアップロードするための入力フィールドを作成するjavascript関数があります。

私はこのコードを持っています：

<script type="text/javascript">
    function add_input(){ 
        var wo = document.getElementById('wo');
        var li = document.createElement('li');

        var input = document.createElement('input');
        input.type = 'file';
        input.name = 'image[]';

    li.appendChild(input);     
    li.appendChild(document.createTextNode(' '));

    var button=document.createElement('input');
        button.type = 'button';
        button.className = 'button small';
        button.onclick=function(){delete_input(this);};
        button.value = 'delete';

    li.appendChild(button);
    wo.appendChild(li);
    }

    function delete_input(feld){ 
    feld.parentNode.parentNode.removeChild(feld.parentNode);
    }
</script>

今私の問題は、最大10個の入力フィールドとして作成したいということです。私はこれまでjavascriptを使用したことがなく、それを制限する方法がわかりません。

私が本当に感謝していることを理解する方法を教えてくれる人がいたら。どうもありがとう。

4

3 に答える 3

3

スクリプトを変更して、次のようにします。

<script type="text/javascript">

    var max = 10;
    var current = 0;

    function add_input(){ 
        if(current < max){
            current++;
            //...do everything in here for append
        }
    }

    function delete_input(feld){ 
        if(current > 0){
            current--;
            feld.parentNode.parentNode.removeChild(feld.parentNode);
        }
    }
</script>
于 2012-04-12T08:51:52.740 に答える
0

関数の最初で、既に存在する項目の数を数え、10 個ある場合は終了します。ここでは「li」を使用して実行しましたが、他に適切なものは何でも数えることができます。

<script type="text/javascript">
function add_input(){
    var wo = document.getElementById('wo');
    var objList  = wo.getElementsByTagName('li');
    var soFar = objList.length;
    if (soFar > 9) {
        alert ("yikes");
        return;
    }
    var li = document.createElement('li');

    var input = document.createElement('input');
于 2012-04-12T09:01:56.320 に答える
0

指定したコードに基づいて、グローバル カウンターを定義することをお勧めします。ここに変更があります。

<script type="text/javascript">
var counter = 0;

function add_input(){ 
  if (counter >= 10) 
  return false;
  var wo = document.getElementById('wo');
  var li = document.createElement('li');

  var input = document.createElement('input');
  input.type = 'file';
  input.name = 'image[]';

  li.appendChild(input);     
  li.appendChild(document.createTextNode(' '));

  var button=document.createElement('input');
  button.type = 'button';
  button.className = 'button small';
  button.onclick=function(){delete_input(this);};
  button.value = 'delete';

  li.appendChild(button);
  wo.appendChild(li);
  counter ++;
}

function delete_input(feld){ 
  feld.parentNode.parentNode.removeChild(feld.parentNode);
  counter --;
}

</script>
于 2012-04-12T09:09:52.450 に答える