在JavaScript中創建星號掙扎

我一直在爲此奮鬥一段時間。我想創建的是根據用戶的輸入輸出一個星號三角形。讓我們說，用戶輸入的大小爲5，這將是這個樣子：在JavaScript中創建星號掙扎

* 
** 
*** 
**** 
*****

我的HTML看起來像：

<p> 
Size: <input type="text" id="size"> 
<input type="button" value="Draw" onclick="draw()"> 
</p> 

<pre id="output"> 
</pre>

在我的JavaScript，我有：

function draw() 
{ 
    var size = customJS.get ("size"); //I have a custom library where it get the Id from HTML 
    var theTriangle = makeTriangle(size.value); //sending in the size 
    customJS.set ("output", theTriangle); //will set theTriangle to display to "output" in HTML 
} 

function makeTriangle(theSize) 
{ 
    var allLines = ""; // an empty string to hold the entire triangle 
    for (var i = 0; i <= size; i++) // this loop size times 
    { 
     var oneLine = createLine (i <= size); // amount of asterisks for this line 
     allLines += oneLine; 
    } 
    return allLines; 
} 

function createLine (length) 
{ 
    var aLine = "";  // an empty string to hold the contents of this one line 
    for (var j = 0; j <= i; j++) //this loop length times 
    { 
     aLine += '*'; 
    } 
    return aLine + "<br>"; 
}

任何人有任何提示我如何解決這個問題？非常感謝！

來源

2013-03-03 Kenneth Ma

HTML中的換行符通常顯示爲空格，但您希望它們顯示爲換行符。該pre標籤使得新行實際出現新的線條，讓包裹在pre標籤輸出：

customJS.set ("output", "<pre>" + theTriangle + "</pre>");

而且，你打電話createLine這樣的：

var oneLine = createLine (i <= size);

i <= size產生一個布爾（true或false）而不是數字。你大概的意思，只是通過它i：

var oneLine = createLine (i);

此外，你設置size這樣的：

var size = customJS.get = ("size");

你可能想掛斷第二個等號，因爲原樣，它設置變量size改爲字符串"size"。

最後，你有幾個變數錯了：在makeTriangle，你循環size次，但size是未定義的;你可能意思是theSize。在createLine，你循環i次，但i是未定義的;你可能意思是length。

以上所有，it works。

來源

2013-03-03 21:08:52 icktoofay

所以我已經改成'var oneLine = createLine（i）;'b ut當我點擊'Draw'時什麼都沒有發生＃ – 2013-03-03 21:22:42

我相信'customJS.set'在這個函數中不是問題，因爲我已經將它用於其他javascript，並且它工作正常。問題必須在'makeTriangle'或'createLine'函數中，但我似乎無法弄清楚... – 2013-03-03 21:27:51

@KennyWong：我剛剛看到一件事（你分配'size'的方式）我已經添加到我的答案。 – icktoofay 2013-03-03 21:28:17

您的代碼中存在一些錯誤。例如，在函數makeTriangle（）中使用Size而不是size作爲參數，在for循環條件中使用i而不是createLine（）函數中的長度。

另一條是：

使用

return aLine + "<br/>";

，而不是

return aLine + "\n";

爲您的代碼工作的解決方案可以在這個jsFiddle發現：http://jsfiddle.net/uwe_guenther/wavDH/

及以下小提琴的副本：

index。HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 
    <p>Size: 
     <input type="text" id="sizeTextField"> 
     <input id='drawButton' type="button" value="Draw"> 
     <div id='output'></div> 
    </p> 

    <script src='main.js'></script> 
</body> 
</html>

main.js

(function (document) { 
    var drawButton = document.getElementById('drawButton'), 
     sizeTextField = document.getElementById('sizeTextField'), 
     output = document.getElementById('output'); 

    function makeTriangle(size) { 
     var allLines = ''; 
     for (var i = 0; i <= size; i++) { 
      var oneLine = createLine(i); // amount of asterisks for this line 
      allLines += oneLine; 
     } 
     return allLines; 
    } 

    function createLine(length) { 
     var aLine = ''; 
     for (var j = 0; j <= length; j++) { 
      aLine += '*'; 
     } 
     return aLine + "<br/>"; 
    } 

    drawButton.onclick = function() { 
     output.innerHTML = makeTriangle(sizeTextField.value); 
    }; 
})(document);

來源

2013-03-03 21:10:42

謝謝你的幫助！ – 2013-03-03 21:56:19

不客氣肯尼！您應該只使用一些調試技術，例如將console.log（）與Chrome devtools或Firefox及其Web控制檯或Firebug一起使用。在所有的瀏覽器中都有老式的alert（）方法。 Chrome現在也有一個完整的調試器。 – 2013-03-03 22:01:59

感謝您的意見。我還有一個問題，我試圖將它輸出到textarea，但是我得到了'*
**
***
****
*****

'我不知道如何保留在textarea中格式化。 – 2013-03-03 22:16:59

你可以利用一些JavaScript技巧，使代碼有點更簡潔：

<div style="text-align: center"> 
    <label>Size: 
     <input type="text" id="size" value="5"> 
    </label> <pre id='output'></pre> 

</div> 
<script> 
    var size = document.getElementById('size'), 
     output = document.getElementById('output'); 

    function update() { 
     var width = +size.value, // Coerce to integer. 
      upsideDown = width < 0, // Check if negative. 
      width = Math.abs(width), // Ensure positive. 
      treeArray = Array(width).join('0').split('0') // Create an array of 0s "width" long. 
       .map(function(zero, level) { // Visit each one, giving us the chance to change it. 
        return Array(2 + level).join('*'); // Create a string of *s. 
       }); 
     upsideDown && treeArray.reverse(); // If width was negative, stand the tree on its head. 
     output.innerHTML = treeArray.join('\n'); // Join it all together, and output it! 
    } 

    size.onkeyup = update; 
    update(); 
    size.focus(); 
</script>

http://jsfiddle.net/mhtKY/4/

來源

2013-10-23 17:21:54

在JavaScript中創建星號掙扎

回答

相關問題