Databases
StackOverflow2013
Postsdbo
POImage.onload function not triggering
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POImage.onload function not triggering
    text
    copied!<pre><code>ReferenceError: imageNoteTaker is not defined layer.add(imageNoteTaker); </code></pre> <p>Above error is coming while trying to do simple tweening using kinetic.js. My project is trying to sync an audio with an animation. The function 'sync()' is called frequently while playing audio. This function inturn calls function 'animation1()' when the audio reaches 4.85s. The code in that function is causing me problem.</p> <p>Here while trying to execute the 'layer.add(imageNoteTaker);' line, the variable imageNoteTaker is not defined. But the code to define imageNoteTaker is present before it in image.onload() method. But control is not skipping this totally.</p> <p>The error is occuring in the following part:</p> <pre><code> var imageObj = new Image(); imageObj.src="images/note_taker.png"; imageObj.onload = function(){ imageNoteTaker= new Kinetic.Image({ x: stage.getWidth()/2.35, y: stage.getHeight()/1.5, width: 75*202/100, height:75*350/100, image: imageObj }); } layer.add(imageNoteTaker); layer.draw(); </code></pre> <p>This is my whole code:</p> <pre><code>//Variable Declaration var audioId=document.getElementById("audioId"); var currentAnimation="none"; //Kinetic Library Setup var stage = new Kinetic.Stage({ container: 'moving', width: 800, height: 545 }); //Layer Declaration var layer = new Kinetic.Layer(); stage.add(layer); //Function called 3-4 times in a second while playing audio var sync=function(){ var currentPosition = audioId.currentTime; console.log("direct from audio tag: "+currentPosition); currentPosition=currentPosition.toFixed(2); console.log("after rounding : "+currentPosition); switch(true){ case rangeGenerator(5.85,currentPosition): console.log(currentAnimation + "is CurrentAnimation"); if(currentAnimation!="animation1"){ currentAnimation="animation1"; animation1(); } break; default: console.log("default"); } }; //Function used in sync() function to check a value is in particular range var rangeGenerator=function(value,currentPosition){ if(Math.abs(currentPosition-value)&lt;.25){ console.log(currentPosition+"dfd"+"value"); return true; } else{ return false; } }; //Function that triggers the first animation; NoteTaker var animation1=function(){ console.log("Animation1"); //Image Note_Taker Initialisation var imageObj = new Image(); imageObj.src="images/note_taker.png"; imageObj.onload = function(){ imageNoteTaker= new Kinetic.Image({ x: stage.getWidth()/2.35, y: stage.getHeight()/1.5, width: 75*202/100, height:75*350/100, image: imageObj }); } layer.add(imageNoteTaker); layer.draw(); console.log("Tweening..."); var tween = new Kinetic.Tween({ node: imageNoteTaker, duration: 1, x: stage.getWidth()/2.35, y: stage.getHeight()/4.0 }); tween.play(); }; //On window resize, resizing stage too. window.onresize = function(event) { stage.setWidth((window.innerWidth / 100) * 80); // 80% width again }; </code></pre> <p>How can i remove this error?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload