为什么在HTML5 Canvas和JavaScript上不能使用两个以上的变量？_html-js-css

概述我正在使用此代码：<!doctype html> <html> <head> <link rel='stylesheet' type='text/css' media='all' href='css/reset.css' />  <script type='

我正在使用此代码：

<!DOCTYPE HTML><HTML><head><link rel="stylesheet" type="text/CSS" media="all" href="CSS/reset.CSS" /> <!-- reset CSS --><script type="text/JavaScript" src="http://code.jquery.com/jquery.min.Js"></script><style>    body{ background-color: ivory; }    canvas{border:1px solID red;}</style><script>$(function(){    var canvas=document.getElementByID("canvas");    var ctx=canvas.getContext("2d");    var $text1=document.getElementByID("sourceText1");    var $text2=document.getElementByID("sourceText2");    var $text3=document.getElementByID("sourceText3");    $text1.onkeyup=function(e){ redrawTexts(); }    $text2.onkeyup=function(e){ redrawTexts(); }    $text3.onkeyup=function(e){ redrawTexts(); }    function redrawTexts(){        ctx.clearRect(0,canvas.wIDth,canvas.height);           wrapText(ctx,$text1.value,20,60,100,24,"verdana");        wrapText(ctx,$text2.value,150,$text3.value,200,"verdana");    }    function wrapText(context,text,x,y,maxWIDth,FontSize,FontFace){      var words = text.split(' ');      var line = '';      var lineHeight=FontSize;      context.Font=FontSize+" "+FontFace;      for(var n = 0; n < words.length; n++) {        var testline = line + words[n] + ' ';        var metrics = context.measureText(testline);        var testWIDth = metrics.wIDth;        if(testWIDth > maxWIDth) {          context.fillText(line,y);          line = words[n] + ' ';          y += lineHeight;        }        else {          line = testline;        }      }      context.fillText(line,y);      return(y);    }}); // end $(function(){});</script></head><body>    <h4>Type text to wrap into canvas.</h4>    <input ID=sourceText1 type=text>    <input ID=sourceText2 type=text>    <input ID=sourceText3 type=text><br>    <canvas ID="canvas" wIDth="900" height="600" ></canvas></body></HTML>

而且我似乎无法使“ sourceText3”变量正常工作？

基本上,代码允许实时编辑HTML5画布,而我不能获得2个以上的文本输入来工作？

理想情况下,我想要更多的输入框,用于我正在从事的另一个项目.

非常感谢.

汤姆

最佳答案尝试将ID放在引号中,这样