Detecting href click

Question

Ok, so I have been trying for a few days now to figure out how to detect a user click, and assign new properties to a variable. I have attempted this in a few different ways most of them however not working.

So far I have this, which is pretty self explainitory.

var settings = {
    objSlideTrigger: '#one', // link button id
    objSlidePanel: '#content-one' // slide div class or id       
};


if(document.getElementById('#one').click) {
 var setup = settings;
    setup.objSlideTrigger = '#one',
    setup.objSlidePanel = '#content-one'
};

if(document.getElementById('#two').click) {
 var setup = settings;
    setup.objSlideTrigger = '#two',
    setup.objSlidePanel = '#content-two'
};

when the user clicks a href on the page it I want it to be detected by the javascript and, for the correct setup to be placed within the settings var for use by the rest of the code. I have two questions really the first being, I will have to duplicate the conditional statement at least ten times so is there anyway to condense/simplify the code.

secondly,When detecting a Href click in javascript do i have to assign an onclick value to the actual element in the html?

thanks again.

Answer 1

With jQuery

Assuming you're wanting to use jQuery because you've included it at the top, use:

$(document).on('click', '#one', function( event ) {
   //Do Code here
   //For #one click event
});

Although, to prevent DRY - keep it more generic by using Classes:

<div class="updatesettings" id="one">One</a>
<div class="updatesettings" id="two">Two</a>

<script>
    $(document).on('click', '.updatesettings', function( event ) {
       //Do Code here
       //For all .updatesettings click event
       alert( $(this).attr('id') );
    });
</script>

With JavaScript

var OnOneClick = function() { 
  // Your click handler
};

var OneClick = document.getElementsById("#one");
OneClick.addEventListener('click', OnOneClick, false);

Then to listen for multiple, use by Class (Although not all IE versions can listen for this):

var AwaitedClickEvent = function() {
    //Class Click
}

var WaitingClick = document.getElementsByClassName('clickme');
for (var i = 0; i < WaitingClick.length; i++) {
   var current = WaitingClick[i];
   current.addEventListener('click', AwaitedClickEvent, false);
}

Your Solution

<!-- Links with ID & Content -->
<div class="updatesettings" id="one" data-content="content-one">One</a>
<div class="updatesettings" id="two" data-content="content-two">Two</a>

<script>
    /**
     *   Get the clicked element's ID
     *   and it's stored data-content string.
    **/
    $('.updatesettings').on('click', function( event ) {
         var Id = $(this).attr('id'),
             Content = $(this).data('content'),
             setup = settings,
             setup.objSlideTrigger = Id,
             setup.objSlidePenl = Content;

         console.log( setup );
    });
</script>