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

How do you add functions to an assortment of buttons sequentially

本文关键字：按钮 添加 功能 何按 顺序      更新时间：2023-09-26

我有几个div标签，类为opt，其中有一个输入和按钮元素。我试图创建一个函数，将采取从输入标签的值，当你点击按钮，下一个输入和按钮字段将弹出，并要求你输入不同的信息，而以前的输入和按钮标签将隐藏自己。但是，该函数在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();

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

确保是"下一个输入"，然后再尝试更改下一个输入的类。

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>

相关文章：