JavaScript嵌套for循環模式

-2

我想創建一個X或加（+）模式使用JavaScript for-loop但未能做到這一點。這裏是我的代碼JavaScript嵌套for循環模式

function drawCross(){ 
    var inputVal = document.getElementById("input").value; 
    if (inputVal % 2 === 0) { // checks if the user's entered value is even 
     document.getElementById("output").innerHTML = ""; 

     for (var row = 0; row < inputVal; row++) { 
      for (var col = 0; col < inputVal; col++) { 

       if (row == col + 3 || row == parseInt(inputVal/1)) 
        document.getElementById("output").innerHTML += "O"; 
       else 
        document.getElementById("output").innerHTML += ".."; 
      } 
      document.getElementById("output").innerHTML += "<br/>"; 
     } 
    } 
}

這就是我想實現

來源

2017-05-26 sal

什麼不起作用？ – jdmdevdotnet

你可以發佈jsfiddle嗎？你的更新只是顯示你想要發生的事情，而不是發生了什麼事情，是什麼問題。 – jdmdevdotnet

的幾個問題的最終結果：

確保您的輸出元件使用等寬字體。例如，你可以使用pre這個元素。那麼你不必爲了獲得仍然不完美的東西而加倍分數。
輸入數字應該是奇數，而不是偶數。否則，你沒有中心列/行。
第二個對角線的公式不像你有它（除以1沒有多大意義）。使用row == +inputVal - col - 1

從

除此之外，也儘量少交流與DOM：只有當你有最終的HTML字符串更新。

下面是代碼：

function drawCross(){ 
 
    var inputVal = +document.getElementById("input").value; 
 
    var html = ""; 
 
    if (inputVal % 2 === 1) { // checks if the user's entered value is odd 
 
     for (var row = 0; row < inputVal; row++) { 
 
      for (var col = 0; col < inputVal; col++) { 
 
       if (row == col || row == inputVal - col - 1) 
 
        html += "O"; 
 
       else 
 
        html += "."; 
 
      } 
 
      html += "<br/>"; 
 
     } 
 
     document.getElementById("output").innerHTML = html; 
 
    } 
 
}

Enter odd number: <input id="input"> 
 
<button onclick="drawCross()">Go</button> 
 
<pre id="output"></pre>

來源

2017-05-26 21:02:10 trincot

你一定要把這個答案放在你的個人資料裏hehehe – PiLHA

JavaScript嵌套for循環模式

回答

相關問題