passing a variable (id) from html to external js file with functions
Question
I'm novel with javascript, and I trying to develop a webpage with dynamics graphs using for that canvas, html 5 and javascript. I wouldn't like to mix html "code" with javascript code, so I decided to keep it separated and call from html the javascript functions. The fact is that when I try to pass my canvas Id to javascript function I'm making a mistake and I have no idea how to fix it. This is my html code:
<html>
<head>
<title></title>
<script type="text/javascript" language="javascript" src="Funciones.js">
window.onload = drawRectangulo('myCanvas');
</script>
</head>
<body>
<h1>Canvas Example:</h1>
<canvas id="myCanvas" width="200" height="100"></canvas>
</body>
</html>
And my JavaScript file is like this:
function drawRectangulo(idCanvas)
{
var Canvas = document.getElementById('idCanvas');
var context = Canvas.getContext('2d');
context.fillRect(50,0,10,150);
}
I don't know if the call to drawRectangulo function on javascript file is right, and if I'm passing the canvas's id right: window.onload = drawRectangulo('myCanvas'); ¿How should I pass the Id from the html file to the js function?. Should I use: ('', "",) or should I create a new variable, initiate it with the canvas's id and pass it to the function? Am I processing good the variable id inside JavaScript function?
3 answers
solution1
2 2013-05-17 20:10:48
You need to do this:
window.onload = function () {
drawRectangulo('myCanvas');
}
Your code is calling drawRectangulo as soon as it runs, and assigning the result of the call (which is undefined ) to window.onload .
Edit based on Dan's comment: you also need to change this:
document.getElementById('idCanvas');
to this:
document.getElementById(idCanvas);
Edit 2 : You also need to separate your imported script from your inline script, like this:
<script type="text/javascript" language="javascript" src="Funciones.js"></script>
<script type="text/javascript">
window.onload = drawRectangulo('myCanvas');
</script>
A single <script> element can either import a script from another file, or define an inline script, or both. (That explains why moving your inline script elsewhere in your HTML made it work.)
solution2
1 2013-05-17 20:17:12
I think this
var Canvas = document.getElementById('idCanvas');
should be
var Canvas = document.getElementById(idCanvas);
With those apostrophes there, you're not referencing the parameter.
solution3
0 2013-05-17 20:41:43
I think I know why it doesn't work. I have made this change on html and now is working right:
<html>
<head>
<title></title>
<script type="text/javascript" language="javascript" src="Funciones.js"></script>
</head>
<body>
<script type="text/javascript" language="javascript">
window.onload = function (){
drawRectangulo('myCanvas');
}
</script>
<h1>Canvas Example:</h1>
<canvas id="myCanvas" width="200" height="100"></canvas>
</body>
</html>
I took out the window.onload from the header to the body and it worked. Thanks for your help anyway.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.