Adding an onclick event to a div from within javascript

pwee167

09-05-2007, 04:38 AM

Hi,

I have 2 questions: First is a coding issue and the second is a design question.

I am trying to add an onclick event to a div from within javascript. Basically i have 2 divs containing arrows ("<<" and ">>"), used to toggle the week of a calendar. At the moment the ajax communication and handling of the response is working fine. After i processed this, i want to switch the arrows, basically add onclick to the previously non-active arrow and then nullify the previously active arrow. How do i go about doing this? Below is my attempt at solving it, with no luck.

function switch_direction(direction)
{
var leftobj = document.getElementById("left");
var rightobj = document.getElementById("right");

if(direction == "right")
{
rightobj.className = "toggle_off";
leftobj.className = "toggle_on";
rightobj.onclick = null;
leftobj.onclick = "init()";
}
else
{
rightobj.className = "toggle_on";
leftobj.className = "toggle_off";
rightobj.onclick = "init()";
leftobj.onclick = null;
}
}

Design question:

At the moment i have a sort of a controller function (using a switch), init(), which is called by all events. I detect the event and find the id of the element the event was triggered on. I am not too sure if this a good idea, as i have a calendar with a div for every 30mins in a day (and 7 days of the week). Thats 336 divs, which at the moment i intend to add the onclick="init()" function to.
I am pretty new to javascript (about 2 days), so any assistance or contructive criticism is appreciated.

function init()
{
var evt = window.event || arguments.callee.caller.arguments[0];
if(evt != null)
{
var target = evt.target || evt.srcElement;

var element_id = target.id;

switch(element_id)
{
case "right":
case "left":
toggle_week(element_id);
switch_direction(element_id);
break;
default:
}
}
}

pwee167

09-05-2007, 07:22 AM

Any one?

chump2877

09-05-2007, 07:35 AM

looking for something like this? This will programmatically attach onclick events to many divs at once from within your JS code (this is to give you the idea):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang=en>
<head>
<title></title>
<meta name="robots" content="noindex,nofollow" />
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<style type="text/css">
div {width:200px;padding:20px;cursor:hand;background-color:#eee;margin:15px 0}
</style>
<head>
<body>
<div>Blah1</div>
<div>Blah2</div>
<div>Blah3</div>
<div>Blah4</div>
<div>Blah5</div>
<div>Blah6</div>

<br />
<p id="count" style="font:bold 20px Times;color:red;text-indent:20px">1</p>
<script type="text/javascript">
function AttachAllDivEvents()
{
var divCollection = document.getElementsByTagName("div");
for (var i=0; i<divCollection.length; i++)
{
AttachDivClickEvent(divCollection[i]);
}
}
function AttachDivClickEvent(divObj)
{
divObj.onclick = function()
{
document.getElementById("count").innerHTML = parseInt(document.getElementById("count").innerHTML) + 1;
};
}
window.onload = AttachAllDivEvents;
</script>

</body>
</html>