Javascript 如何对a中的节点元素进行分组<；p>；标签_Javascript_If Statement_For Loop_Button

Javascript 如何对a中的节点元素进行分组<；p>；标签

javascript if-statement for-loop button

Javascript 如何对a中的节点元素进行分组<；p>；标签,javascript,if-statement,for-loop,button,Javascript,If Statement,For Loop,Button,我想知道是否有人能帮我。我遇到的问题是“#”和“空格”分别显示在它们自己的行上，我尝试的是这样的布局（每行末尾没有引号）： “#####” “#####” “#####” 代码每行显示四个“#”。长度由提示用户的数字决定非常感谢您的帮助，再次感谢 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap

我想知道是否有人能帮我。我遇到的问题是“#”和“空格”分别显示在它们自己的行上，我尝试的是这样的布局（每行末尾没有引号）：

“#####”

代码每行显示四个“#”。长度由提示用户的数字决定

非常感谢您的帮助，再次感谢

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <title>Q3 Display</title>

    <style>

        .resultText {
            display: inline-block;
        }


    </style>
</head>

<body>
<div>

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">

        <li role="presentation" class="active"><a href="#q3" aria-controls="q3" role="tab" data-toggle="tab">Q3</a></li>

    </ul>

    <!-- Tab panes -->
    <div class="tab-content">


        <!-- Question 3 Start -->
        <div role="tabpanel" class="tab-pane tab-pane active" id="q3">
            <div class="row">
                <div class="col-md-12">
                    <pre>
                    Question 3 code:

                    </pre>
                </div>
                <div class="col-md-12">
                    <!-- button -->
                    <button id="q3-button" class="btn btn-default" type="button">Question Three Solution</button>
                </div>
                <div class="col-md-12">

                    <!-- result -->
                    <div id="result"></div>

                </div>
            </div>

        </div>


        <script>

            //Question 3

            //When the button is clicked, begin the function called start

            $("#q3-button").on("click", function () {
                start();
            });


            function start() {

            //Sets up user prompt
                var start = parseInt(prompt("How long would you like the side to be?"));

                //Determine if what was entered in prompt is a number
                if (isNaN(start)) {
                    alert("That's not a number, please retry.");
                    var start = prompt("Please re-enter a number.");
                }

                //Grabs the result div and assigns it a variable, will be used later on for result printing
                var element = document.getElementById("result");

                for (var i = 1; i <= start; i++) {


                    for (var j = 1; j <= 8; j++) {

                        if ((i + j) % 2 == 0) {


                            //Creates <p></p> element
                            var p1 = document.createElement("p");

                            //sets a class to the <p></p> element
                            p1.setAttribute("class", "resultText");

                            //Sets a variable to hold the text the <p></p> should contain
                            var node1 = document.createTextNode("#");

                            //Actually adds the text to the <p></p> element
                            p1.appendChild(node1);

                            //adds the <p></p> tag to the results div
                            element.appendChild(p1);
                        }
                        else {

                            //Creates <p></p> element
                            var p2 = document.createElement("p");

                            //p2.setAttribute("class", "resultText");

                            //Sets a variable to hold the text the <p></p> should contain (in this case an empty tag)
                            var node2 = document.createTextNode(" ");

                            //Actually adds the text to the <p></p> element
                            p2.appendChild(node2);

                            //adds the <p></p> tag to the results div
                            element.appendChild(p2);

                        }

                    }

                }

            }

        </script>

    </div>
</body>


</html>


Q3显示器
.resultText{
显示：内联块；
}



问题3代码：
问题三解决办法
//问题3
//单击按钮后，开始名为start的函数
$（“#q3按钮”）。在（“单击”上，函数（）{
start（）；
});
函数start（）{
//设置用户提示
var start=parseInt（提示（“您希望边保持多长时间？”）；
//确定在提示符中输入的内容是否为数字
如果（isNaN（启动））{
警报（“这不是一个数字，请重试。”）；
var start=prompt（“请重新输入一个数字”）；
}
//获取结果div并为其分配一个变量，稍后将用于结果打印
var元素=document.getElementById（“结果”）；
对于（var i=1；iNode.appendChild（）
将新元素放在节点子元素列表的末尾，或将现有元素移到那里
在代码中，如果要在一行中打印4
，请更改此行：
for (var i = 0; i < 4; i++ ) {
    p1.appendChild(node1);
}

到
编辑
如果要在输出中包含引号，请执行以下操作：
var node1=document.createTextNode（“#”“#”“#”“#”“”）；

也就是说，在双引号周围使用单引号，并在元素中添加空格。您不需要重复插入多个文本节点来输出一行内容。
谢谢您的帮助。代码似乎要输出两组四个“#”“#”“#”“#”“然后在下一行中输入正确的数量。@fasteddie您能告诉我具体是什么吗是否要？是否要打印N行
？我尝试的是：用户输入一个数字，该数字是将显示的行数。每行由四个“#”和四个空格组成，如下所示：“#”“#”“#”“#”感谢您的帮助。@fasteddie如果您想在输出中包含引号，请按如下方式执行：var node1=document.createTextNode（“#”“#”“#”“#”“#”）；，也就是说，在双引号周围使用单引号，并在元素中添加空格。您不需要重复插入多个文本节点来输出一行内容。非常感谢您的帮助，我现在就可以使用了。
for (var i = 0; i < 4; i++ ) {
    p1.appendChild(node1);
}

<p>Text1</p>
<p>Text2</p>