0

私はしばらくこれに苦労してきました。私が作成したかったのは、ユーザーの入力に基づいてアスタリスクの三角形を出力することです。ユーザーがサイズ 5 を入力したとします。これは次のようになります。

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

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

誰も私がこれについてどうするかについて何かヒントがありますか? どうもありがとうございます！

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

おそらく、2 番目の equals を削除することをお勧めします。これは、変数sizeを stringに設定するためです"size"。

最後に、いくつかの変数が間違っています。 では、時間をmakeTriangleループしていますが、未定義です。あなたはおそらく意味した。では、時間をループしていますが、未定義です。あなたはおそらく意味した。sizesizetheSizecreateLineiilength

以上で、動作します。

于 2013-03-03T21:08:52.113 に答える
1

コードにいくつかのバグがありました。たとえば、関数 makeTriangle() のパラメータとして size の代わりに theSize を使用し、for ループ条件の createLine() 関数で length の代わりに i を使用します。

もう1つは次のとおりです。

使用する

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-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 に答える