onclick counter = array.length not functioning

Question

I can't figure out why my counter isn't working. I feel like it should be since it will work on some different code on a wordpress site, but it is not working with this code if I open it from the .html file I'm testing. I'm not a coder so I'm sure my code looks in disarray, so go easy on me.

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

Any ideas?

You set the counter to 0 every time the function is entered, so the condition will never be true unless ol is empty. — Evan Trimboli
– Evan Trimboli, Commented Apr 25, 2016 at 23:32

Rick Hitchcock · Accepted Answer · 2016-04-25 23:32:18Z

3

It's because your counter variable is being reset to 0 each time the button is clicked.

Move var counter= 0; outside the function, and it works fine:

Fiddle

answered Apr 25, 2016 at 23:32

Rick Hitchcock

35.7k5 gold badges51 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hamms · Accepted Answer · 2016-04-25 23:34:08Z

Note that in your function myFunction you initialize counter to zero and then increment it once. But every time your function is called as a result of clicking the button, it is reinitialized to zero.

You probably want to put all your initialization logic outside of the function, and just make it responsible for doing the things you actually want done every click.

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>

Such a simple answer for something that baffled me for hours. Thanks all!

Collectives™ on Stack Overflow

onclick counter = array.length not functioning

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related