如何使用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>
按钮用于将输入字段中给出的两个值相乘,然后创建矩形的行和列。输出应在“提交”按钮下方,但我没有解决方案。
答案 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>