onclick counter = array.length funktioniert nicht

Ich kann nicht herausfinden, warum mein Zähler nicht funktioniert. Ich habe das Gefühl, dass es funktionieren sollte, da es auf einer Wordpress-Site an einem anderen Code funktioniert, aber es funktioniert nicht mit diesem Code, wenn ich ihn aus der HTML-Datei öffne, die ich gerade teste. Ich bin kein Programmierer, also bin ich mir sicher, dass mein Code unordentlich aussieht.onclick counter = array.length funktioniert nicht

<!doctype html> 
    <html> 
     <head> 
      <title>JS Test</title> 
      <meta charset="utf-8"> 
     </head> 
     <body> 
      <h1>Test Javascript</h1> 
      <form id="form1"> 
       <fieldset id="java"> 
        <legend>Form Append Test</legend> 
        <div id="tabelRow"> 
        </div> 
        <div id="button"> 
         <p><input type="button" onclick="myFunction()" value="Click"></p> 
        </div> 
       </fieldset> 
      </form> 
      <script type="text/javascript"> 
       function myFunction() { 
        var fs = document.getElementById("java"); 
        var button = document.getElementById("button"); 
        var newDiv = document.createElement("div"); 
        var newH = document.createElement("label"); 
        var hText = document.createTextNode("Product"); 
        var newP = document.createElement("select"); 
        var options = [ 
         { 
          "text" : "FHA", 
          "value" : "1" 
         }, 
         { 
          "text" : "USDA", 
          "value" : "2" 
         }, 
         { 
          "text" : "VA", 
          "value" : "3" 
         }, 
         { 
          "text" : "Convnetional", 
          "value" : "4" 
         }, 
         { 
          "text" : "Construction", 
          "value" : "5" 
         }, 
         { 
          "text" : "Chattel", 
          "value" : "6" 
         }, 
         { 
          "text" : "Fannie MAE HARP", 
          "value" : "7" 
         } 
        ]; 
        newH.appendChild(hText); 
        newDiv.className = "tablerow test"; 
        newDiv.appendChild(newH); 
        newDiv.appendChild(newP); 
        var ol = options.length; 
        var counter = 0; 

        if (counter == ol) { 
         alert("You have reached the limit of adding " + counter + " inputs"); 
        } 
        else { 
         for(var i = 0; i < ol; i++) { 
          var proMenu = options[i]; 
          newP.options.add(new Option(proMenu.text, proMenu.value)); 
         } 
        fs.appendChild(newDiv); 
        fs.insertBefore(newDiv, button); 
        counter++; 
        } 
       } 
      </script> 
     </body> 
    </html>

Irgendwelche Ideen?

Quelle

2016-04-25 Ryan Steiger

Sie setzen den Zähler auf 0 jedes Mal die Funktion eingegeben wird, so wird die Bedingung nie wahr sein, es sei denn 'ol' leer ist. –

Beachten Sie, dass myFunction in Ihrer Funktion Sie counter auf Null zu initialisieren und es dann noch einmal erhöhen. Aber jedes Mal, wenn Ihre Funktion als Ergebnis des Klickens auf die Schaltfläche aufgerufen wird, wird sie auf Null neu initialisiert.

Sie möchten wahrscheinlich alle Ihre Initialisierungslogik außerhalb der Funktion, und machen Sie es nur verantwortlich für die Dinge tun, die Sie eigentlich tun möchten, jeden Klick.

var fs = document.getElementById("java"); 
 
var button = document.getElementById("button") 
 
var options = [{ 
 
    "text": "FHA", 
 
    "value": "1" 
 
}, { 
 
    "text": "USDA", 
 
    "value": "2" 
 
}, { 
 
    "text": "VA", 
 
    "value": "3" 
 
}, { 
 
    "text": "Convnetional", 
 
    "value": "4" 
 
}, { 
 
    "text": "Construction", 
 
    "value": "5" 
 
}, { 
 
    "text": "Chattel", 
 
    "value": "6" 
 
}, { 
 
    "text": "Fannie MAE HARP", 
 
    "value": "7" 
 
}]; 
 
var ol = options.length; 
 
var counter = 0; 
 

 
function addOption() { 
 
    var newDiv = document.createElement("div"); 
 
    var newH = document.createElement("label"); 
 
    var hText = document.createTextNode("Product"); 
 
    var newP = document.createElement("select"); 
 
    newH.appendChild(hText); 
 
    newDiv.className = "tablerow test"; 
 
    newDiv.appendChild(newH); 
 
    newDiv.appendChild(newP); 
 

 
    if (counter == ol) { 
 
    alert("You have reached the limit of adding " + counter + " inputs"); 
 
    } else { 
 
    for (var i = 0; i < ol; i++) { 
 
     var proMenu = options[i]; 
 
     newP.options.add(new Option(proMenu.text, proMenu.value)); 
 
    } 
 
    fs.appendChild(newDiv); 
 
    fs.insertBefore(newDiv, button); 
 
    counter++; 
 
    } 
 
}

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <title>JS Test</title> 
 
    <meta charset="utf-8"> 
 
</head> 
 

 
<body> 
 
    <h1>Test Javascript</h1> 
 
    <form id="form1"> 
 
    <fieldset id="java"> 
 
     <legend>Form Append Test</legend> 
 
     <div id="tabelRow"> 
 
     </div> 
 
     <div id="button"> 
 
     <p> 
 
      <input type="button" onclick="addOption()" value="Click"> 
 
     </p> 
 
     </div> 
 
    </fieldset> 
 
    </form> 
 
</body> 
 

 
</html>

Quelle

2016-04-25 23:34:08 Hamms

Eine so einfache Antwort auf etwas, das mich stundenlang verblüffte. Danke allen! –

Dies liegt daran, dass Ihre counter Variable bei jedem Klicken auf die Schaltfläche auf 0 zurückgesetzt wird.

Verschieben var counter= 0; außerhalb der Funktion, und es funktioniert gut:

Fiddle

Quelle

2016-04-25 23:32:18

onclick counter = array.length funktioniert nicht

Antwort

Verwandte Themen