如何打印星号的矩形

时间:2018-12-08 19:43:06

标签: jquery html

如何使用jQuery打印星号矩形?我有两个输入字段,它们用于获取输入值,两个都绘制​​一个星号矩形。

$(document).ready(function() {
  $("#new").click(function() {
    var firstnum = document.getElementById("column").value;
    var secondnum = document.getElementById("rows").value;
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 style="text-align: center;">To Print Asterisks</h1>
<label>Enter Column</label>
<input type="text" id="column" placeholder="Enter The Column Number"><br>
<label>Enter Rows</label>
<input type="text" id="rows" placeholder="Enter The Rows Value"><br>
<button id="new">Submit</button>

按钮用于将输入字段中给出的两个值相乘,然后创建矩形的行和列。输出应在“提交”按钮下方,但我没有解决方案。

1 个答案:

答案 0 :(得分:0)

您可以尝试如下操作:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script language="javascript">
    $(document).ready(function() {
        $("#new").click(function() {
            var firstnum = document.getElementById("column").value;
            var secondnum = document.getElementById("rows").value;
            var row = "";
            for(var i = 0; i < firstnum; i++) {
                row += "*";
            }
            row += "<br/>"; // Or "\n" if you want non-html markup result
            var rectangle = "";
            for(var i = 0; i < secondnum; i++) {
                rectangle += row;
            }
            $("#output").html(rectangle);
        });
    });
</script>

<h1 style="text-align: center;">To Print Asterisks</h1>
<label>Enter Column</label>
<input type="text" id="column" placeholder="Enter The Column Number"><br>
<label>Enter Rows</label>
<input type="text" id="rows" placeholder="Enter The Rows Value"><br>
<button id="new">Submit</button>
<div id="output"></div>