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