I have been attempting to define an onclick method that would trigger a function to clear and reconstruct the display, revealing more detailed information about the clicked item. However, I am facing an issue where the assigned onclick method is executed immediately upon assignment, resulting in only one item's details being displayed.
If you eliminate the line i.node.onclick, you will see five randomly positioned items that can be hovered over but not clicked on.
HTML
<html>
<head>
<title>Raphael Play</title>
<script type="text/javascript" src="Raphael.js"></script>
<script type="text/javascript" src="Test.js"></script>
<style type="text/css">
#map
{
width: 500px;
border: 1px solid #aaa;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
JavaScript
var map;
var items = new Array();
window.onload = function()
{
map = new Raphael(document.getElementById('map'), 500, 500);
for(cnt = 0; cnt < 5; cnt++)
{
var x = 5 + Math.floor(Math.random() * 490);
var y = 5 + Math.floor(Math.random() * 490);
items[cnt] = new Item(x, y);
var i = map.circle(items[cnt].x, items[cnt].y, 8).attr({fill: "#000", stroke: "#f00", title: items[cnt].name});
i.node.onclick = detailView(items[cnt]);
}
}
function Item(x, y)
{
this.x = x;
this.y = y;
this.name = "Item[" + x + "," + y + "]";
}
function detailView(dv)
{
map.clear();
map.circle(250, 250, 25).attr({fill: "#0f0", stroke: "#f00", title: dv.name});
}