Error drawing a circle on canvas when its in a function,works fine outside function
Question
I found code to draw a circle in w3 schools. it works perfect standalone. when I paste it in my WEB page... I get an Error when I click the button. Line: 31 Error: Unable to get value of the property 'value': object is null or undefined. What am I doing wrong? I am struggleing with w3 schools sample code, which is not in a function, then putting it in a function and it no longer works. it can't find the "value"
w3 schools example which works fine.
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
</script>
</body>
my WEB page
<html>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var dia = 100;
var x = 180;
var y = 200;
ctx.beginPath();
ctx.arc(x,y,dia,0,2*Math.PI);
ctx.stroke();
// why when I create a function is it not able to do anything outside a function.
function Calc()
{
var dia = document.getElementById("txtdia").value; // Line 31
var circumf = dia * Pi;
document.getElementById("txtcircumf").value = circumf;
// DrawCircle();
}
</script>
<form>
Enter Diamater: <input type="text" name="txtdia" class="textboxclass_small" /><br>
Circumference: <input type="text" name="txtcircumf" />
<input type="button" value="Circumference" onclick="Calc()"/>
</form>
</body>
</html>
Taking from the responses below, thanks eveyone ============================ here is my final page which works great ======================= This calculates the circumference and draws a circle on a canvas
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h2>Calculate Circumference</h2>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
function DrawCircle (x,y,dia)
{
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(x,y,dia,0,2*Math.PI);
ctx.stroke();
}
function Calc()
{
var dia1 = document.getElementById("txtdia").value;
var circumf = dia1 * Math.PI;
document.getElementById("txtcircumf").value = circumf;
DrawCircle(180,200,dia1);
}
</script>
<form>
Enter Diamater: <input type="text" id="txtdia" class="textboxclass_small" /><br>
Circumference: <input type="text" id="txtcircumf" />
<input type="button" value="Calculate" onclick="Calc()"/>
</form>
</body>
</html>
3 answers
solution1
1 ACCPTED 2014-01-03 13:28:02
var circumf = dia * Pi;
This looks like a typo, perhaps you meant Math.PI
var circumf = dia * Math.Pi;
Further, you're relying on * to cast dia to a Number , you might want to consider parseFloat if you keep getting unexpected results even after fixing Math.PI
As mentioned in comments, you will also need to include an id attribute on the Nodes you wish to access by id .
solution2
0 2014-01-03 13:30:02
change this
<input type="text" name="txtdia" class="textboxclass_small" />
by
<input type="text" id="txtdia" class="textboxclass_small" />
then getElementById will work.
Thanks,
Siva
solution3
0 2014-01-03 13:37:27
If you want to use the name attribute, use document.getElementsByName(name)
var x = document.getElementsByName("txtdia");
var dia = x[0];
var circumf = dia * Pi;
document.getElementsByName("txtcircumf")[0].value = circumf;
or as the other answers suggest, just change the name attribute to an id attribute.
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.