He intentado imprimir el valor de entrada del usuario en un patrón piramidal, pero tengo un error y no puedo colocar mi etiqueta de intervalo como un formato de patrón piramidal.
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>Realmente quiero, si la entrada del usuario es una demostración
d Delaware dem manifestación
¿Dónde estoy haciendo mal ..?
demasiados errores
1- usa string += '\n' // not "<br/>";
2- el valor num1 es textBoxValue , no de demo
3- la posición del primer carácter en una cadena es cero, no uno
4-...
solución javascript
(la etiqueta está presente en la pregunta)
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>su jQuery corregido ...
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>reemplace su id="textBoxValue"" a id="textBoxValue" reemplace su $('#pyramid').text(string) a
$('#pyramid').html(string) en su cadena también hay undefined . y num1 es el selector de identificación, por lo que en su count hay una longitud de su entrada. así que básicamente tienes que eliminar length $('#'+num1).val() .
Aquí hay un ejemplo de trabajo. lo que hiciste mal es:
1 para i, j y k, que deben ser 02 * i - 1 proporciona 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>