0

I've been struggling with this for some time now. What I wanted to create is to output a triangle of asterisks based on user's input. Let say user entered size 5, it would look something like this:

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

My HTML looks like:

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

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

In my Javascript, I have:

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>";
}

anyone have any tip on how I go about this? thank you so much!

4

3 回答 3

1

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设置为 string "size"。

最后，你有几个变量是错误的： in makeTriangle，你是循环size次数，但size未定义；你可能的意思是theSize。在createLine中，您正在循环i时间，但i未定义；你可能的意思是length。

有了这一切，它的工作原理。

于 2013-03-03T21:08:52.113 回答
1

您的代码中有几个错误。例如，在函数 makeTriangle() 中使用 theSize 代替 size 作为参数，在 for 循环条件中的 createLine() 函数中使用 i 代替 length。

另一个是：

利用

return aLine + "<br/>";

代替

return aLine + "\n";

您的代码的工作解决方案可以在这个jsFiddle中找到：http : //jsfiddle.net/uwe_guenther/wavDH/

下面是小提琴的副本：

索引.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-03T21:10:42.840 回答
0

您可以利用一些 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-23T17:21:54.647 回答