onclick 计数器 = array.length 不工作

Question

我不明白为什么我的计数器不工作。我觉得它应该是因为它可以在 wordpress 网站上使用一些不同的代码，但是如果我从我正在测试的 .html 文件打开它，它就不能使用这个代码。我不是编码员，所以我确定我的代码看起来很乱，所以请放轻松。

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

有什么想法吗？

Answer 1

这是因为每次单击按钮时您的 counter 变量都被重置为 0。

将var counter= 0;移到函数外，效果很好：

Fiddle

Answer 2

请注意，在您的函数 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>

onclick 计数器 = array.length 不工作

onclick counter = array.length not functioning

javascript

alert

counter

increment