onclick counter = array.length不起作用

我想不通爲什麼我的櫃檯不工作。我覺得應該這樣做，因爲它可以在wordpress網站上的一些不同的代碼上工作，但是如果我從我測試的.html文件中打開它，它不會與此代碼一起工作。我不是一個編碼器，所以我確定我的代碼看起來很亂，所以對我來說很容易。onclick counter = array.length不起作用

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

任何想法？

來源

2016-04-25 Ryan Steiger

您計數器每次進入函數的時間設置爲0，所以，除非'ol'是空的條件永遠不會爲真。 –

注意，在你的函數myFunction初始化counter到零，然後遞增一次。但是，每次單擊按鈕後調用函數時，函數都會重新初始化爲零。

您可能希望將所有初始化邏輯放在該函數之外，並且只需要負責執行您實際上每次點擊所要完成的操作。

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>

來源

2016-04-25 23:34:08 Hamms

這麼簡單的答案讓我困惑了幾個小時。謝謝大家！ –

這是因爲每次單擊該按鈕時，您的counter變量將被重置爲0。

移動var counter= 0;功能外，它工作正常：

Fiddle

來源

2016-04-25 23:32:18

onclick counter = array.length不起作用

回答

相關問題