javascript - return an object that show which element was clicked -

edit fact use closures , function important. gatherdata() , votesection()

i want click div called submitbutton should tell me users have done. have 3 sections. voting section, review section, , type of voting section. point right i'm trying set first voting section. when click submitbutton should object looks {vote:down} or {vote:up} have 2 buttons in voting section.

function gatherdata(){     var submitbutton = ".submitbutton";     var result = {}     function votesection(){         $(".upbutton").click(function(){             // result.vote = "up"             //  console.log(result) ;             $(this).data("clicked", true);             $(this).siblings(".downbutton").data("clicked",false)         })         $(".downbutton").click(function(){             $(this).data("clicked", true);             $(this).siblings(".upbutton").data("clicked",false)             // result.vote = "down";             //  console.log(result) ;         })     //    return result;     }     $(submitbutton).on("click",function(){         if($(".upbutton").data("clicked")){             result.vote = "up"         }else if($(".downbutton").data("clicked")){             result.vote = "down";         }     })     return result; } $(".submitbutton").on("click",function(){     console.log(gatherdata()) }) 

thanks help

edit realized forgot call votesection

here's have now. return empty object

function gatherdata(){     var submitbutton = ".submitbutton";     var result = {}     function votesection(){         $(".upbutton").click(function(){             // result.vote = "up"             //  console.log(result) ;             $(this).data("clicked", true);             $(this).siblings(".downbutton").data("clicked",false)         })         $(".downbutton").click(function(){             $(this).data("clicked", true);             $(this).siblings(".upbutton").data("clicked",false)             // result.vote = "down";             //  console.log(result) ;         })         if($(".upbutton").data("clicked")){             result.vote = "up"         }else if($(".downbutton").data("clicked")){             result.vote = "down";         }         // })         return result;     //    return result;     }    return votesection()     // $(submitbutton).on("click",function(){  } $(".submitbutton").on("click",function(){     console.log(gatherdata()) }) 

== update version 2 == closure example

here second version uses closure returns function can called acquire current state.

http://codepen.io/anon/pen/xojajl

notice event handlers bind dom 1 time per call votegatherer(), result of calling votegatherer() function can call when need state of vote.

function votegatherer() {   var state = { 'vote': null }; // no vote selection made     $(".my-voting-button").click(function(ev)   {     var target = $(ev.target);     state[target.data("action")] = target.data("value");   });     return function()   {      return state;   } }  var gatherer1getstate = votegatherer();  $(".my-submit-button").click(function(ev)                              {   $("#statestring").html(json.stringify(gatherer1getstate())) ; }); 

==== version 1

i threw code pen manage state across these sections before hit sumbit. check out.

http://codepen.io/anon/pen/bzrxrk

<button data-value="up" data-action="vote" class="btn btn-primary my-voting-button">vote up</button> <button data-value="down" data-action="vote" class="btn btn-warning my-voting-button">vote down</button> 

notice voting buttons attributed action , value updated on state object.

so when click vote button, state["vote"] value set "up". can applied of fields. can add "my-voting-button" class other button (and maybe rename class better fits use case).

here javascript updates state object:

var state = { 'vote': null }; // no vote selection made   $(".my-voting-button").click(function(ev) {   var target = $(ev.target);   state[target.data("action")] = target.data("value"); }); 

now have state object populated, can sumbit object ajax server. in example stringify , write out on page.

$(".my-submit-button").click(function(ev) {   $("#statestring").html(json.stringify(state)) ; });