ボタンの組み合わせに関数を追加するにはどうすればいいですか

Question

ののクラスに複数の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

あなたにもループ内でクリックハンドラをバインドする必要があります。代わりにオブジェクトを使用できるときに、プロパティを格納するために並列配列を使用する必要もありません。

は次の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>