CODEWITHSUNDEEP
javascripthtmlcanvas
R2 Builder
R2 Builder

Reputation: 99

Error drawing a circle on canvas when its in a function,works fine outside function

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>

Upvotes: 0

Views: 402

Answers (3)

inohika
inohika

Reputation: 1

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.

Upvotes: 0

SivaRajini
SivaRajini

Reputation: 7375

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

Upvotes: 0

Paul S.
Paul S.

Reputation: 66324

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.

Upvotes: 1

Related Questions