I have tried to print user input value into pyramid pattern,but i've got an error and it cannot placed my span tag as a pyramid pattern format
function getPyramid(num1){
var count=$('#'+num1).val().length;
var string ="";
for (var i=1;i<=count;i++){
for(var j=1;j<=count-i;j++){
string +=" "
}
for(var k=1;k <=2*i-1;k++){
string += num1[k]+" ";
}
string +="<br/>";
}
$('#pyramid').text(string);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<input type="text" id="textBoxValue" />
<button value="Submit" onclick="getPyramid('textBoxValue');" >Submit</button>
<h2>
<pre id="pyramid"></pre>
</h2>
</html>Acutually i want ,If user input is demo
d d e d e m d e m o
Where i am doing wrong..?
too many errors
1- use string += '\n' // not "<br/>";
2- num1 value is textBoxValue, not demo
3- the position of the first character in a string is zero, not one
4-...
javascript solution
(the tag is present in the question)
myForm.onsubmit = e =>
{
e.preventDefault()
let characters = myForm.textBoxValue.value.trim()
, output = ''
;
for (let count=1, spacing=characters.length; count < characters.length; count++)
{
output += ' '.repeat(--spacing)
+ [...characters.substr(0,count)].join(' ')
+ '\n'
}
output += [...characters].join(' ')
pyramid.textContent = output
}<form id="myForm">
<input type="text" name="textBoxValue" value="demo">
<button>Submit</button>
</form>
<h2>
<pre id="pyramid"></pre>
</h2>your jQuery corrected...
function getPyramid(num1)
{
let
inputText = $('#'+num1).val()
, count = inputText.length
, string = ''
;
for (let i=1;i<=count;i++)
{
for(let j=1;j<=count-i;j++)
{
string +=" "
}
for(let k=0;k<i;k++)
{
string += inputText[k]+" ";
}
string += '\n' // not "<br/>";
}
$('#pyramid').text(string);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="textBoxValue" value="demo">
<button onclick="getPyramid('textBoxValue');">Submit</button>
<h2>
<pre id="pyramid"></pre>
</h2>replace your id="textBoxValue"" to id="textBoxValue"
replace your $('#pyramid').text(string) to
$('#pyramid').html(string)
in your string there is undefined also.
and num1 is id selector so in your count there is length of your input.
so basically you have to remove length $('#'+num1).val().
here is working example. what you done wrong is:
1 for i,j and k which need to be 02 * i - 1 provide undefinedfunction getPyramid(num1) {
var value = $('#' + num1).val();
var string = "";
for (let i = 0; i <= value.length; i++) {
for (let j = 0; j <= value.length - i; j++) {
string += " "
}
for (let k = 0; k < i; k++) {
string += value[k] + " ";
}
string += "<br/>";
}
$('#pyramid').html(string);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#editable {
width: 400px;
height: 100px;
border: 1px solid black;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="textBoxValue" />
<button value="Submit" onclick="getPyramid('textBoxValue');">Submit</button>
<h2>
<pre id="pyramid"></pre>
</h2>
</body>
</html>