Question

I am using a function that obtains a target element id at onclick. Example, if I click on the text element that has the id of ‘help’.

var click = (e && e.target) || (event && event.srcElement);

The var click would contain the ref to the id of “help”.

I want to compare the var click to the string ‘help’ using the if statement below.

if (click == 'about') {do something}

The comparison does not work because the var click is not a string. When I use the alert(click) to debug, it shows click as “object HTMLElement”.

How would you compare whether the id ‘help’ is obtained from var click?

I could write out something like

if (click == document.getElementById('help')) {do something}

but that would make a long statement.

also

if the var click is document.getElementById('help'), how would I create a new var “div” as document.getElementById('helpdiv') by adding the word “div” in the id of the var click?

basically, I want to use the same function to generate dynamic responses to each element that was clicked on, and not having to create a separate function for each element.

if (click.id == 'help'){
var link = click;
var divid = click.id+'div';
var div = document.getElementById(divid);
alert (div.id); //helpdiv string
}

TIA for all your help.

Answer 1

The line:

var click = (e && e.target) || (event && event.srcElement);

is not getting the id rather the element itself, use getAttribute to get the id instead.

var id = click.getAttribute('id');
alert(id);

Or simply:

var id = click.id;
alert(id);

So your condition now becomes:

if (id == 'about') {do something}

and

if (id == document.getElementById('help')) {do something}