<html>
<head>
<style type="text/css">
#mycanvas{
width:500px;
height:450px;
border:2px solid green;
font-size:30px;
}
</style>
<script>
window.onload = function (){
vcan = {};
vcan.main = {}
vcan.main.repNode = [];
vcan.main.currentTransform = {'id':0, 'name':'myobj'}
document.getElementById("mycanvas").addEventListener('mousemove', mymousemove);
function mymousemove(){
var currAdTime = new Date().getTime();
console.log(currAdTime);
var myObj = extend(vcan.main.currentTransform , {mdTime:currAdTime, func:'add'})
vcan.main.repNode.push(myObj);
}
function extend (fobj, sobj){
if((typeof fobj == 'object') && (typeof sobj == 'object')){
for(var prop in sobj){
fobj[prop] = sobj[prop];
}
return fobj;
}else{
alert("it seems that the arguments you passed are not object");
}
}
document.getElementById("test").onclick = function (){
var output = "";
for(var i=0; i< vcan.main.repNode.length; i++){
output += vcan.main.repNode[i].mdTime;
output += "<br />";
}
document.getElementById("result").innerHTML = output;
}
}
</script>
</head>
<body>
<div id="mycanvas">
Please move the mouse inside this box
And click on Show Result
</div>
<button id="test">
Show Result
</button>
<div id="result">
</div>
</body>
</html>
For solve problem please render these above code into browser. After click on Show Result button there would be shown time. My question is that why all the same time are displaying.
The latest value of time is overriding into different element of array of object.
At the same time if we see the console then time would be different.
After long search, I could not solve this problem. Please guys help me to solve this problem.
Here is a fixed solution http://jsfiddle.net/WacV4/1/. Object in JS are assigned by reference not by copying its values, so
myObjinmymousemovealways modifies the same value. You just need to copyvcan.main.currentTransformbefore extending.