Fatal编程技术网

努力在Javascript中创建星号

javascript function

努力在Javascript中创建星号,javascript,function,Javascript,Function,我已经为此挣扎了一段时间了。我想创建的是根据用户的输入输出一个三角形的星号。假设用户输入的尺寸为5，它看起来像这样： * ** *** **** ***** var oneLine = createLine ( i ); return aLine + "<br/>"; 我的HTML看起来像： <p> Size: <input type="text" id="size"> <input type="button" value="Draw" oncli

我已经为此挣扎了一段时间了。我想创建的是根据用户的输入输出一个三角形的星号。假设用户输入的尺寸为5，它看起来像这样：

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

var oneLine = createLine ( i );

return aLine + "<br/>";
我的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>";
}

函数绘图（）
{
var size=customJS.get（“size”）；//我有一个自定义库，它从HTML中获取Id
var theTriangle=makeTriangle（size.value）；//发送大小
customJS.set（“output”，theTriangle）；//将在HTML中将要显示的triangle设置为“output”
}
函数makeTriangle（大小）
{
var allLines=“”；//用于保存整个三角形的空字符串

对于HTML中的（var i=0；i换行符通常显示为空格，但您希望它们显示为换行符。
pre
标记使换行符实际显示为新行，因此将输出包装在
pre
标记中：


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



i代码中有几个错误。例如，在函数makeTriangle（）中使用size而不是size作为参数，在For循环条件下的createLine（）函数中使用i而不是length

另一个是：

使用

您的代码的工作解决方案可以在以下内容中找到：

下面是小提琴的副本：

index.html



尺寸：




main.js


（功能（文档）{
var drawButton=document.getElementById（'drawButton'），
sizeTextField=document.getElementById（'sizeTextField'），
output=document.getElementById（'output'）；
函数makeTriangle（大小）{
var-allLines=''；

对于（var i=0；i，您可以利用一些JavaScript技巧使代码更加简洁：



尺寸：
var size=document.getElementById（'size'），
output=document.getElementById（'output'）；
函数更新（）{
var width=+size.value，//强制为整数。
upsideDown=宽度<0，//检查是否为负值。
宽度=Math.abs（宽度），//确保为正。
trearray=Array（width）.join（'0'）.split（'0'）//创建一个0“width”长的数组。
.map（函数（零，级别）{//访问每一个函数，给我们更改它的机会。
返回数组（2+级）。join（'*'）；//创建一个*s字符串。
});
upsideDown&&trearray.reverse（）；//如果宽度为负数，请将树顶着。
output.innerHTML=trearray.join（'\n'）；//将所有内容连接在一起，然后输出！
}
size.onkeyup=更新；
更新（）；
size.focus（）；



所以我改为
var oneLine=createLine（i）
但是当我点击
绘图时什么也没有发生，我相信
customJS.set
在这个函数中不是问题，因为我在我的其他javascript中使用过它，它工作得很好。问题一定出在
makeTriangle
或
createLine
函数中，但我似乎无法解决它…@KennyWong:我刚才看到了还有一件事（你分配
大小的方式）我已经添加到了我的答案中。我已经解决了。但是当我点击DrawWOW时仍然没有发生任何事情！太棒了！难以置信，你只花了不到30分钟的时间就弄明白了，而我花了几个小时，只是盯着它，想知道“我到底做错了什么”？非常感谢！！不客气Kenny！你应该使用一些调试技术，比如console.log（）和Chrome devtools，或者Firefox和它的web控制台或Firebug。还有god old alert（）方法在所有浏览器上都能工作。Chrome最近也有一个成熟的调试器。谢谢你的建议。我还有一个问题，我试图将它输出到文本区域，但结果却是，

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

我不知道如何将格式保存在文本区域中。而不是“
“使用”&&请看这里：在这里您可以阅读有关它的所有详细信息：

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



return aLine + "<br/>";



return aLine + "\n";



<!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>



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



<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>