如何按顺序向各种按钮添加功能

Question

我有几个带有 opt 类的 div 标签，其中有一个输入和按钮元素。我正在尝试创建一个函数，该函数将从输入标签中获取值，当您单击按钮时，将弹出下一个输入和按钮字段并要求您输入不同的信息，而前一个输入和按钮标签将自行隐藏.但是，这里的功能不起作用的是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();

Answer 1

您还需要在循环中绑定点击处理程序。当您可以使用对象时，您也不需要使用并行数组来存储属性。

在尝试更改下一个输入的类之前，请确保有“下一个输入”。

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>