Javascript Funktion Begrenzen

Question

Ich habe eine JavaScript-Funktion, die Eingabefelder zum Hochladen von Bildern erstellt.

ich habe diesen Code:

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

jetzt mein Problem ist, dass ich als maximal 10 Eingabefelder erstellen möchten. Ich habe vorher noch nie Javascript benutzt und weiß nicht, wie ich das begrenzen kann.

wenn es jemanden gibt, der mir sagen könnte, wie man erkennt, dass ich wirklich schätzen würde. Danke vielmals.

Answer 1

Ihren Skript ändern, damit es erhalten wird:

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

Answer 2

Zu Beginn der Funktion zählen, wie viele der Elemente bereits vorhanden sind und dann verlassen, wenn es 10 ist habe ich es hier die Verwendung von ‚li‘, aber man kann was auch immer sonst zählt angemessen ist:

<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'); 

Answer 3

es ist besser, zu einem globalen Zähler definiert, basierend auf dem Code, den Sie gegeben, hier ist Änderung:

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