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初始化为零，然后将其递增一次。但是每次单击按钮调用函数时，它都会重新初始化为零。

您可能希望将所有初始化逻辑放在函数之外，并让它负责执行每次单击时实际需要完成的操作。

＆＃13;

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++;
  }
}

＆＃13;

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

＆＃13;

onclick counter = array.length不起作用

2 个答案: