none
onclick = function doesn't work!!!

    Domanda

  • I made this simple code to figure out what's the problem with my website that I'm working on. I discovered that the function doesn't take the values from the input tag.

    This is my code:

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    var canvas = $("#myCanvas");
    var context = canvas.get(0).getContext("2d");
    context.fillRect(40, 40, 100, 100);
    function translation()
    				{
    				var x = document.getElementById('x').value;
    				var y = document.getElementById('y').value;
    				var r = document.getElementById('r').value;
    				var g = document.getElementById('g').value;
    				var b = document.getElementById('b').value;
    				context.translate(x, y);
    				context.fillStyle = "rgb(" + r + ", " + g + ", " + b + ")";
    				context.fillRect(50, 50, 50, 50);
    				}
    });
    </script>
    </head>
    <body>
    <canvas id="myCanvas" width="500" height="500">
    <!-- Insert fallback content here -->
    </canvas>
    	<br />
    			<center>
    			<div id = "divBack">
    		<div id = "contact-form">
    		<p>
    		Try to change the translation of the rectangle, and try to change the color of the rectangle:
            </p>
    		<p>function translation()</p>
    		<p>		{ </p>
    		<p>		init();</p>
    		<p>		context.translate(<input type="text" name="x" id="x" placeholder="X"/>, <input  type="text" name="y" id="y" placeholder="Y"/>);</p>
    		<p>		context.fillStyle = "rgb(<input  type="text" name="r" id="r" placeholder="Red"/>, <input  type="text" name="g" id="g" placeholder="Green"/>, <input  type="text" name="b" id="b" placeholder="Blue"/>)";</p>
    		<p>		context.fillRect(50, 50, 50, 50);</p>
    		<p>		}</p>
    		<button onclick = "translation()">Translation</button>
    		</div>
    		</div>
    		</center>
    </body>
    </html>
    When I take this line out:

    function translation()
    

    It works, but without the button.

    Can any one, please, explain why the button doesn't work calling this function?

    Regards,
    lunedì 9 aprile 2012 07:54

Risposte

  • <dir>
    SCRIPT5009: 'translation' is undefined 
    canvastranslate.htm, line 44 character 22
    
    function translate(){} block is within $(document).ready(function() {} block.... close the document.ready event handler before defining the translate function.
    </dir>
    SCRIPT5009: 'context' is undefined 
    canvastranslate.htm, line 20 character 5

    the scope of context is within the $(document).ready(function()  {} block.... make context global.

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
    var context;
    $(document).ready(function() {
    var canvas = $("#myCanvas");
    context = canvas.get(0).getContext("2d");
    context.fillRect(40, 40, 100, 100);
    });
    function translation()
    				{
    				var x = document.getElementById('x').value;
    				var y = document.getElementById('y').value;
    				var r = document.getElementById('r').value;
    				var g = document.getElementById('g').value;
    				var b = document.getElementById('b').value;
    				context.translate(x, y);
    				context.fillStyle = "rgb(" + r + ", " + g + ", " + b + ")";
    				context.fillRect(50, 50, 50, 50);
    				}
    
    </script>
    </head>
    <body>
    <canvas id="myCanvas" width="500" height="500">
    <!-- Insert fallback content here -->
    </canvas>
    	<br />
    			<center>
    			<div id = "divBack">
    		<div id = "contact-form">
    		<p>
    		Try to change the translation of the rectangle, and try to change the color of the rectangle:
            </p>
    		<p>function translation()</p>
    		<p>		{ </p>
    		<p>		init();</p>
    		<p>		context.translate(<input type="text" name="x" id="x" placeholder="X"/>, <input  type="text" name="y" id="y" placeholder="Y"/>);</p>
    		<p>		context.fillStyle = "rgb(<input  type="text" name="r" id="r" placeholder="Red"/>, <input  type="text" name="g" id="g" placeholder="Green"/>, <input  type="text" name="b" id="b" placeholder="Blue"/>)";</p>
    		<p>		context.fillRect(50, 50, 50, 50);</p>
    		<p>		}</p>
    		<button onclick = "translation()">Translation</button>
    		</div>
    		</div>
    		</center>
    </body>
    </html>

    to debug your scripts in a web page in IE9, F12>script tab, click "Start Debugging" (page will reload and break on errors)


    Rob^_^

    • Proposto come risposta IECustomizerMVP lunedì 9 aprile 2012 09:20
    • Contrassegnato come risposta alihht lunedì 9 aprile 2012 09:51
    lunedì 9 aprile 2012 09:19

Tutte le risposte

  • <dir>
    SCRIPT5009: 'translation' is undefined 
    canvastranslate.htm, line 44 character 22
    
    function translate(){} block is within $(document).ready(function() {} block.... close the document.ready event handler before defining the translate function.
    </dir>
    SCRIPT5009: 'context' is undefined 
    canvastranslate.htm, line 20 character 5

    the scope of context is within the $(document).ready(function()  {} block.... make context global.

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
    var context;
    $(document).ready(function() {
    var canvas = $("#myCanvas");
    context = canvas.get(0).getContext("2d");
    context.fillRect(40, 40, 100, 100);
    });
    function translation()
    				{
    				var x = document.getElementById('x').value;
    				var y = document.getElementById('y').value;
    				var r = document.getElementById('r').value;
    				var g = document.getElementById('g').value;
    				var b = document.getElementById('b').value;
    				context.translate(x, y);
    				context.fillStyle = "rgb(" + r + ", " + g + ", " + b + ")";
    				context.fillRect(50, 50, 50, 50);
    				}
    
    </script>
    </head>
    <body>
    <canvas id="myCanvas" width="500" height="500">
    <!-- Insert fallback content here -->
    </canvas>
    	<br />
    			<center>
    			<div id = "divBack">
    		<div id = "contact-form">
    		<p>
    		Try to change the translation of the rectangle, and try to change the color of the rectangle:
            </p>
    		<p>function translation()</p>
    		<p>		{ </p>
    		<p>		init();</p>
    		<p>		context.translate(<input type="text" name="x" id="x" placeholder="X"/>, <input  type="text" name="y" id="y" placeholder="Y"/>);</p>
    		<p>		context.fillStyle = "rgb(<input  type="text" name="r" id="r" placeholder="Red"/>, <input  type="text" name="g" id="g" placeholder="Green"/>, <input  type="text" name="b" id="b" placeholder="Blue"/>)";</p>
    		<p>		context.fillRect(50, 50, 50, 50);</p>
    		<p>		}</p>
    		<button onclick = "translation()">Translation</button>
    		</div>
    		</div>
    		</center>
    </body>
    </html>

    to debug your scripts in a web page in IE9, F12>script tab, click "Start Debugging" (page will reload and break on errors)


    Rob^_^

    • Proposto come risposta IECustomizerMVP lunedì 9 aprile 2012 09:20
    • Contrassegnato come risposta alihht lunedì 9 aprile 2012 09:51
    lunedì 9 aprile 2012 09:19
  • Thank you very much. :)

    You saved my life. I was searching for a solution since yesterday and the only thing that I got was I read about new things that I didn't know.

    Thank you again.

    My best wishes. :)))
    lunedì 9 aprile 2012 09:51
  • thats ok... You provided your full source code which I could easily copy and paste and test myself... most ppl asking questions here think that we can read minds and do not provide the full source or a link to their website...

    but did you learn anything....?

    see how easy it is to debug/solve problems with the Ie Developer tool? so... F12>Script tab, click "Start Debugging"

    hopefully you won't be back here now that you know how to debug with the developer tool yourself.


    Rob^_^


    lunedì 9 aprile 2012 11:06
  • What I provide was just a sample website that I made with few lines of codes to share it in the forum to make things easy for people who will help by pointing directly to the problem.

    ((but did you learn anything....?))

    I learned a lot. :))) Just I need to have the time to spend it in applying what I learned because I don't have enough time for that.

    I'm ganna use the IE developer tool don't worry :P

    However, I will be here again to learn and to ask when I can't figure out a problem unless you don't want me to come here at all :PPPP

    Thank you again for helping me. :))

    lunedì 9 aprile 2012 11:30
  • I am always willing to help, but not to do the thinking for you. You have all the tools you need at your fingertips and between your shoulders.

    It took me 4 years of university to learn to teach myself... <wink> That was the 'real' value of an education, not the content.


    Rob^_^

    mercoledì 11 aprile 2012 07:24