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不起作用

回答

相关问题