paramToExternalFile = 'all';

var div = document.createElement('div');
div.style.background = '#D8D8D8';
div.innerHTML = '<a href=' + xml_list_externalFile_SNS1 + paramToExternalFile + '/' + letters + '>View All</a>';
div.id = 'view_all';
div.className='optionDiv_sns';
ajax_optionDiv_SNS.appendChild(div);

This is the javascript for creating a div in dropdown, but I want this div to be clickable.

As you can see I have given the link but it will work only when I click by using mouse on that link but it won't work when I press 'enter'

paramToExternalFile = 'all';

var div = document.createElement('div');
div.style.background = '#D8D8D8';
div.innerHTML = '<a href=' + xml_list_externalFile_SNS1 + paramToExternalFile + '/' + letters + '>View All</a>';
div.id = 'view_all';
div.className='optionDiv_sns';
ajax_optionDiv_SNS.appendChild(div);

This is the javascript for creating a div in dropdown, but I want this div to be clickable.

As you can see I have given the link but it will work only when I click by using mouse on that link but it won't work when I press 'enter'

• javascript
• ajax

5 Answers 5

You can add a click event directly to your div like this

div.addEventListener("click", function() {
   alert("You clicked this div");
});

If you want to support older browsers, you'll have to do a bit more work:

if (div.addEventListener)
     div.addEventListener("click", function() {
         alert("You clicked this div");
     });
else if (div.attachEvent) 
     div.attachEvent("onclick", function() {
         alert("You clicked this div");
     });

<script type="text/javascript">
function myFn() {
   alert("My div is clicked!!");
   // something else...
}
</script>
<div onclick="myFn();">My DIV body</div>

Is this what you want? or you can try this:

<div id="myDiv"> My Div body </div>
<script type="text/javascript">
// Works on not-ie
document.getElementById("myDiv").addEventListener("click",function() {
    alert("I'm clicked!!");
}, false);
// Works on all
document.getElementById("myDiv").onclick = function() {
    alert("I'm clicked!!");
}
// Works on ie
document.getElementbyId("myDiv").attachEvent("onclick",function() {
    alert("I'm clicked!!");
});
</script>

$('#view_all').click(function() {
  alert('Handler for .click() called.');
});

Use the OnClick event to attach your Javascript function to it, like:

<div onclick="alert('clicked');">
 This is a div
</div>

To call the click function on pressing the Enter key you can try this untested code, it should work:

<div onkeydown="if (event.keyCode == 13) DoSomething();"/>

On the other hand you can use JQuery for that which can make it easier, see this Untested code:

$("#idivId").keyup(function(event){
  if(event.keyCode == 13){
    $("#DivId").click();
  }
});

div.onclick=function(){
  // whatever you want to happen here
}