在畫布上繪制圓環時出現錯誤，在外部功能正常

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