counting input type text fields that are completed via javascript

Question

Problem: Tried two different ways to make code count the amount of fields completed; Keeps outputting "0" or "5", which obviously shows that it doesn't work.

I'm actually fairly new to JavaScript so I don't know if it's something obvious that I'm missing or not. Although I searched and found a couple that were related, they dealt with using jQuery.

HTML PART:

        <form id="form1">
            <input type="text" id="choice0" /><br />
            <input type="text" id="choice1" /><br />
            <input type="text" id="choice2" /><br />
            <input type="text" id="choice3" /><br />
            <input type="text" id="choice4" /><br />
        </form>
        <button onClick="choicesCompleted()">Update Wheel</button>
        <button type="reset" form="form1">Restart</button>

        <p>choices filled: <span id="showc"></span></p>

JS PART:

function choicesCompleted() {
var c = 0;

for (i = 0; i < 5; i++) {
    if (document.getElementById("choice" + i).value != null) {
        c = c + 1;
    }
}
document.getElementById("showc").innerHTML = c;
}

Like I mentioned before, other solutions dealt with jQuery and although it may not be typical, I was just trying to complete this by just using JavaScript. I am trying to get in more practice and some understanding as to why it's not working.

I tried going a different route by pushing a simple value of the text input into an array and then displaying it but it also leads to a dead end. Here is an example of a simple test I tried to run to see if it would even work.

<!DOCTYPE html>
<html>
<body>
<p>ANSWER: <span id="here"></span></p>

<input type="text" id="line0" />
<button onclick="pleaseWork();">Submit</button>

</body>

<script>
function pleaseWork() {
var array = [];
array.push(document.getelementbyid("line0").value);
document.getelementbyid("here").innerHTML = array[0];
}
</script>
</html>

Sorry for the formatting on this one, I was doing it in an online editor.

Nick Tomlin · Accepted Answer · 2014-10-01 23:27:44Z

2

You are checking for null when you should be checking that the value does not equal '' (the value of an empty input).

Your second example is not working because the method to get an element by its id is getElementById and you were using getelementbyid.

function choicesCompleted() {
  var c = 0;

  for (i = 0; i < 5; i++) {
    if (document.getElementById("choice" + i).value !== '') {
      c = c + 1;
    }
  }
  document.getElementById("showc").innerHTML = c;
}

<form id="form1">
  <input type="text" id="choice0" />
  <br />
  <input type="text" id="choice1" />
  <br />
  <input type="text" id="choice2" />
  <br />
  <input type="text" id="choice3" />
  <br />
  <input type="text" id="choice4" />
  <br />
</form>
<button onClick="choicesCompleted()">Update Wheel</button>
<button type="reset" form="form1">Restart</button>

<p>choices filled: <span id="showc"></span>
</p>

edited Oct 1, 2014 at 23:27

answered Oct 1, 2014 at 23:15

Nick Tomlin

29.4k12 gold badges65 silver badges95 bronze badges

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

2 Comments

cjros Over a year ago

CODE WORKS! i really appreciate the quick response! do you mind explaining why the bottom one wouldn't work?

Nick Tomlin Over a year ago

@ccoog Happy to help. Just updated with why the second example does not work.

Collectives™ on Stack Overflow

counting input type text fields that are completed via javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related