1

UPDATE making the colorChange function global solves the problem

I am trying to change the color of the path when the button 'Red' is clicked using colorChange function .Regardless of my logic , the error says 'Function 'colorChange' is not defined' . The internal paper js functions like path() are working , but my function isn't . 

<head>
<!-- Load the Paper.js library -->
<script type="text/javascript" src="js/paper.js"></script>
<!-- Load external PaperScript and associate it with myCanvas -->
<script type="text/paperscript" src="js/myScript.js" canvas="myCanvas"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <button onClick='colorChange(id)' id='red'>Red</button> // Using it here
    <canvas id="myCanvas" resize="true"></canvas>
</body>

Here's myScript.js for canvas ID='myCanvas' :

var myPath={};

var colorChange=function(id){  //function I defined doesn't work
    myPath=new Path();
    myPath.strokeColor=id;
}

function onMouseDown(event){   //this works
    myPath=new Path();
    myPath.add(event.point);
}
She
  • 393
  • 3
  • 16
  • @Hacketo the question isn't a duplicate . yes i did try your proposed solution. But it doesn't work . – She Aug 21 '15 at 13:00
  • i tried calling the function from the console , i failed again – She Aug 21 '15 at 13:03
  • It has nothing to do with the way the function is declared (as in the duplicate question). This question should be reopened. – manji Aug 21 '15 at 15:22
  • the problem is that `colorChange` exists only in the scope of that paperscript and is not visible outside. In your case, it should be defined globally to be used as handler to button clicks. – manji Aug 21 '15 at 15:24
  • @manji thank you ! I was disappointed by the response of stack overflow moderators. This made my day ! – She Aug 21 '15 at 15:48

1 Answers1

0

Move the script tag to the bottom of the page, not in the header. That should make it work.

Manu Masson
  • 1,667
  • 3
  • 18
  • 37