User Input to Alphabet Pyramid Pattern-CodePudding

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

CodePudding user response：

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
    , output     = ''
    ;
  const
    addLetters = count => 
      { for (let c=0; c<count;   c ) output  = characters[c]   ' '; }
    ;
  for (let spacing = characters.length; --spacing;)
    {
    output  = ' '.repeat(spacing)
    addLetters(characters.length - spacing)
    output  = '\n'
    }
  addLetters(characters.length)
  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>

CodePudding user response：

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:

you just start with 1 for i,j and k which need to be 0
and 2 * i - 1 provide undefined

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