在画布上绘制圆环时出现错误，在外部功能正常

Question

我在w3学校找到了画圆圈的代码。 它可以完美独立运行。 当我将其粘贴到WEB页面中时...单击按钮时出现错误。 行：31错误：无法获取属性“值”的值：对象为null或未定义。 我究竟做错了什么？ 我在w3学校示例代码中苦苦挣扎，该代码不在函数中，然后将其放在函数中不再起作用。 它找不到“值”

W3学校的例子很好。

<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>

我的网页

<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>

从下面的回复中，谢谢eveyone ============================这是我最后一页，效果很好====== =================这将计算周长并在画布上绘制一个圆

<!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>

Answer 1

var circumf =  dia * Pi;

这看起来像是一个错字，也许您是说Math.PI

var circumf =  dia * Math.Pi;

此外，您依靠*将dia转换为Number ，如果即使在修复Math.PI之后仍然得到意外结果，则可能要考虑parseFloat

如评论中所述，您还需要在希望通过id访问的节点上包括id属性。

Answer 2

改变这个

<input type="text" name="txtdia" class="textboxclass_small" />

通过

<input type="text" id="txtdia" class="textboxclass_small" />

然后getElementById将起作用。

谢谢，

湿婆

Answer 3

如果要使用名称属性，请使用document.getElementsByName（name）

var x = document.getElementsByName("txtdia");
var dia = x[0];
var circumf =  dia * Pi;
document.getElementsByName("txtcircumf")[0].value = circumf;

或其他答案表明，只需将name属性更改为id属性即可。

在画布上绘制圆环时出现错误，在外部功能正常

问题描述

3 个解决方案

解决方案1
1 已采纳 2014-01-03 13:28:02

解决方案2
0 2014-01-03 13:30:02

解决方案3
0 2014-01-03 13:37:27

在画布上绘制圆环时出现错误，在外部功能正常

问题描述

3 个解决方案

解决方案1 1 已采纳 2014-01-03 13:28:02

解决方案2 0 2014-01-03 13:30:02

解决方案3 0 2014-01-03 13:37:27

解决方案1
1 已采纳 2014-01-03 13:28:02

解决方案2
0 2014-01-03 13:30:02

解决方案3
0 2014-01-03 13:37:27