錯誤：未獲得所需的輸出

Question

當字符串包含字符“ e”時，我希望打印一個紅色圓圈，如果包含任何其他字符，則我希望打印一個黑色圓圈。

我不知道我到底在哪里弄錯了。 有人能幫我嗎？。

這是我嘗試的代碼。

HTML

<input id="e-" placeholder="type eg:-e---ee---e" type="text" size="50"/>

<button onclick="start()">diagram</button> 

<canvas id="myCanvas"></canvas>

JavaScript

function start() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var str = getElementByID("e-");
  var i;
  for( i=0; i < str.length(); i++ ) {
    if( str.charAt(i) == "e" ) {
      ctx.beginPath();
      ctx.arc(100, 75, 10, 0, 2 * Math.PI);
      ctx.fillStyle = "red";
      ctx.fill();
      ctx.stroke();
    } else {
      ctx.beginPath();
      ctx.stroke();
      ctx.arc(100, 75, 10, 0, 2 * Math.PI);

      ctx.fillStyle = "black";
      ctx.fill();
    }
  }
}

Answer 1

您在這里有幾個錯誤。 我將在下面的實時代碼中發表評論：

 function start() { var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d") // must be prefixed with document., small d in Id, and suffixed with value var str = document.getElementById("e-").value; var i = 0, ch; while(ch = str[i++]) { // no () behind length, changed to while loop ctx.beginPath(); if (ch === "e") { // just check straight ctx.arc(100, 75, 10, 0, 2 * Math.PI); ctx.fillStyle = "red"; ctx.fill(); ctx.stroke(); } else { ctx.arc(100, 75, 10, 0, 2 * Math.PI); ctx.fillStyle = "black"; ctx.fill(); } // need to move the arc position on x axis ctx.translate(22, 0); // diameter + 2 pixels } ctx.setTransform(1,0,0,1,0,0); // reset translate } 

 <input id="e-" placeholder="type eg:-e---ee---e" type="text" size="50" /> <button onclick="start()">diagram</button> <canvas id="myCanvas" width=600 ></canvas>