クラス属性でDiv値を切り替えます

Question

divからinputに値を切り替えて送信したいと思います。

これは私のコードは、これまで

HTML

<form id="forms" action="content.php" method="post"> 
     <input id="foo" type="hidden" value""> 
    </form> 

    <div class="btn" value="1" width="40" height="40"></div> 
    <div class="btn" value="2" width="40" height="40"></div> 

Javascriptを

function $(v) { 
    return document.getElementById(v); 
} 

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

for(i=0; i<btn.length; i++) { 

    btn[i].addEventListener('click', function() { 

     btn.getAttribute('value') = $('foo').value; 

     $('forms').submit(); 

    }, false); 

} 

それがいけないのはなぜ仕事ですか？クリックできませんか？ thx

Answer 1

私はあなたが割り当てを間違っていると思います。 divボタンの値を非表示のfooフィールドに代入する必要があります。また、btnはすべてのボタンの配列です。イベントハンドラのコールバックでは、このコンテキストがアタッチされたイベントを持つ要素にバインドされているため、クリックされたボタンを参照できます。私は、次はあなたが欲しいものだと思う：

(function() { 
    function $(v) { 
    return document.getElementById(v); 
    } 


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

    for (var i = 0; i < btn.length; i++) { 

    btn[i].addEventListener('click', function() { 

     // assign what was clicked (this) to the foo hidden value 
     $('foo').value = this.getAttribute('value'); 
     // now submit 
     $('forms').submit(); 

    }, false); 

    } 
}()); 

編集：例私はあなたがのgetElementsByClassName方法を使用しているので、あなたの実行環境で利用できるようになると仮定した（代わりに配列のforEachのを使用して

(function() { 
    function $(v) { 
    return document.getElementById(v); 
    } 


    var buttons = document.getElementsByClassName('btn'); 

    // each element of the array is passed to the provided callback 
    buttons.forEach(function (button) { 

    button.addEventListener('click', function() { 

     // assign what was clicked (this) to the foo hidden value 
     $('foo').value = this.getAttribute('value'); 
     // now submit 
     $('forms').submit(); 

    }, false); 

    }); 

}()); 

。

Answer 2

これは何の目的がわかりませんか、 ですが、divをラジオボタンとして使用することを願っている場合や、 データ属性を使用する場合は、

そう

<div id="div1" data-value="1"></div> 

よう

、あなたがこのような属性を取得するためにjqueryのを使用することができます。また、jQueryを使って、クリックリスナーに

var div1 = $('#div1').data('value') 

または

var div1 = $('#div1').attr('data-value'); 

$('#div1').on('click', function(){ 
    // do your thing here 
    ... 
}) 

Answer 3

Fiまず、divはvalue属性を持つべきだとは思わない。たぶん、あなたはjQueryの中で簡単に使用することができdata-value、それを切り替える必要があります：javascriptのためとして

<form id="forms" action="content.php" method="post"> 
    <input id="foo" type="hidden" value""> 
</form> 

<div class="btn" data-value="1" width="40" height="40"></div> 
<div class="btn" data-value="2" width="40" height="40"></div> 

を：

$('.btn').on('click', function() { 
    $(this).data('value', $('#foo').val()); 
    $('#forms').submit(); 
});