JS函數未定義（ReferenceError）

Question

這有什麼問題？我得到一個imText沒有定義的錯誤。我做了一些搜索，發現它與範圍有關？有沒有更好的方法來實現我想要做的事情，因爲它也出現使用onClick事件也不建議。

<script> 
    function imText(text) { 
    var c = document.getElementById("canvas"); 
    var ctx = c.getContext("2d"); 
    ctx.font="20px Georgia"; 
    ctx.fillStyle="white"; 
    ctx.fillText(text, 10, 50); 
{ 
</script> 

<div class="canvas"></div> 
    <canvas id="area"></canvas> 
    <form action="text"> 
    <h2>Enter Text:</h2> 
    <input type="text" id="getText" name="text" value="bee"/><br> 

    <input type="button" value="Submit" onclick="imText(document.getElementById('getText').value)" /> 
    </form> 

Answer 1

也許這個右括號：

<script> 
    function imText(text) { 
    var c = document.getElementById("canvas"); 
    var ctx = c.getContext("2d"); 
    ctx.font="20px Georgia"; 
    ctx.fillStyle="white"; 
    ctx.fillText(text, 10, 50); 
} 
</script> 

Answer 2

沒什麼大不了的，一對夫婦的錯誤：</script>前收盤支架和getElementById應引用「區域」而不是「帆布」，因爲你給canvas元素的ID爲 「區域」

<script> 
    function imText(text) { 
    var c = document.getElementById("area"); 
    var ctx = c.getContext("2d"); 
    ctx.font="20px Georgia"; 
    ctx.fillStyle="white"; 
    ctx.fillText(text, 10, 50); 
} 
</script> 

<div class="canvas"></div> 
    <canvas id="area"></canvas> 
    <form action="text"> 
    <h2>Enter Text:</h2> 
    <input type="text" id="getText" name="text" value="bee"/><br> 

    <input type="button" value="Submit" onclick="imText(document.getElementById('getText').value)" /> 
    </form> 

作品在此example link