How do you add functions to an assortment of buttons sequentially

Question

I have several div tags with the class of opt that have an input and button element inside them. I am trying to create a function that will take the value from the input tag and when you click the button, the next input and button field will pop up and ask you to enter different information, while the previous input and button tags will hide itself. However, the function is not working here is the jsfiddle.

HTML

<div id="container">


    <div class="opt active">  <input type="text"  placeholder ="Enter Name"name="name"> <button>OK</button>
    </div>

    <div class="opt">  
      <input type="text"  placeholder ="Enter Age" name="age"> <button>OK</button>
    </div>

    <div class="opt">  
      <input type="text"  placeholder ="Enter Race" name="race"> <button>OK</button>
    </div>

    <div class="opt">  
      <input type="text"  placeholder ="Enter Sex" name="sex"> <button id="done">Done</button>
    </div>


  </div>

Javascript

function init(){

  var opt = document.getElementsByClassName('opt');

    var num = 0;
    var prop = [];
    var propVal = [];


  for (var i = 0 ; i < opt.length; i++)
  {
    opt[i].querySelector('input').value = "";
  }



   opt[num].querySelector('button').onclick = function()
  {
     prop[num] = opt[num].querySelector('input').name;
     propVal[num]= opt[num].querySelector('input').value;

    opt[num].className = "opt";
    opt[num+1].className ="opt active"; 
    console.log(prop +" "+ propVal);
     num++;
  };//button function






}


init();

What should happen on clicking the last button? Should the form be submitted as normal? — Shaggy, Jul 01 '16 at 15:21
@Shaggy when the last button is clicked is supposed to activate another function that would display information you put into the input tag. But, I haven't created it yet — black_yurizan, Jul 01 '16 at 20:40

score 1 · Accepted Answer · answered Jul 01 '16 at 15:30

You need bind the click handlers in the loop as well. You also don't need to use parallel arrays to store the properties when you could use an object instead.

Make sure that there is a "next input" before trying to change the class of the next one.

var opt = document.getElementsByClassName('opt'),
    num = 0, prop = {};

function nextInput() {
  var input = opt[num].querySelector('input');
  prop[input.name] = input.value;
  console.log(prop);

  opt[num].className = "opt";
  if (num + 1 < opt.length) {
     opt[num + 1].className = "opt active";
     num++;
  } else {
     // submit?
  }
}

for (var i = 0; i < opt.length; i++) {
  opt[i].querySelector('input').value = "";
  opt[i].querySelector('button').onclick = nextInput;
}

.opt { display: none }
.opt.active { display: block }

<div id="container">
  <div class="opt active">
    <input type="text" placeholder="Enter Name" name="name">
    <button>OK</button>
  </div>
  <div class="opt">
    <input type="text" placeholder="Enter Age" name="age">
    <button>OK</button>
  </div>
  <div class="opt">
    <input type="text" placeholder="Enter Race" name="race">
    <button>OK</button>
  </div>
  <div class="opt">
    <input type="text" placeholder="Enter Sex" name="sex">
    <button id="done">Done</button>
  </div>
</div>

thanks for helping me solve the problem. I feel that you can do it with the forEach method as well. But, when I tried to use the opt array with the forEach method I would get an error saying that forEach is not a function. — black_yurizan, Jul 01 '16 at 20:39
Ah, yes. That's because [`getElementsByClassName`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName) doesn't actually return an array. It returns an [`HTMLCollection`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection), which doesn't have array methods like `forEach`, but does certainly look like one (since objects can use bracket notation also). Have a look at [this question](http://stackoverflow.com/q/222841/5743988) so that you can make the array methods available. — 4castle, Jul 01 '16 at 20:57

How do you add functions to an assortment of buttons sequentially

1 Answers1