No logro que funcione “parseInt” en texto.value. <code>var texto = document.getElementById("texto_lineas"); var boton = document.getEleme...

Hola, Pablo! 🙋‍♀️ Creo que no lo expliqué muy claramente 😬

En mi primera explicación, quise decir que tienes que hacer una de las dos opciones que mencioné. 😁 Hiciste la segunda por la mitad. Cuando le pregunta al usuario cuántas líneas quiere dibujar, no tiene sentido asignar el valor 30 a la variable x (que es la misma que recibirá la respuesta de cuántas líneas quiere el usuario). Luego puede eliminar la asignación abajo desde el principio.

var x = 30;

Pero una cosa de la que me di cuenta ahora es que tu cilco for está fuera de la función "dibujoporClick". Colóquelo dentro de la función, elimine la asignación e intente nuevamente. ¡Dime si funcionó! 😊

var texto = document.getElementById("texto_lineas");
var boton = document.getElementById("botoncito");
boton.addEventListener("click", dibujoporClick );

var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
var l = 0;
var yi,xf;
var colorcito = "pink";
var color = "#AFA";


dibujarLinea(color,1,1,1,299);
dibujarLinea(color,299,1,1,1);
dibujarLinea(colorcito,1,299,1,1);
dibujarLinea(colorcito,1,1,299,1);

function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.moveTo(xinicial, yinicial);
  lienzo.lineTo(xfinal, yfinal);
  lienzo.stroke();
  lienzo.closePath();
}

function dibujoporClick()
{
  var x = parseInt(texto.value);
  for ( l = 0; l < x; l++ )
  {
	  yi = 10 * l;
	  xf = 10 * (l + 1);
	  dibujarLinea(color,0,yi,xf,300);
	  dibujarLinea(colorcito,300,yi,xf,0);
	  console.log("Linea " + l);	
  }
}

Lo volví a hacer pero no dio resultado. O quizás me equivoqué

var texto = document.getElementById("texto_lineas");
var boton = document.getElementById("botoncito");
boton.addEventListener("click", dibujoporClick );

var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
var x = 30;
var l = 0;
var yi,xf;
var colorcito = "pink";
var color = "#AFA";

for(l=0; l < x; l++)
{
  yi = 10 * l;
  xf = 10 * (l + 1);
  dibujarLinea(color,0,yi,xf,300);
  dibujarLinea(colorcito,300,yi,xf,0);
  console.log("Linea " + l);
}
dibujarLinea(color,1,1,1,299);
dibujarLinea(color,299,1,1,1);
dibujarLinea(colorcito,1,299,1,1);
dibujarLinea(colorcito,1,1,299,1);

function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.moveTo(xinicial, yinicial);
  lienzo.lineTo(xfinal, yfinal);
  lienzo.stroke();
  lienzo.closePath();
}

function dibujoporClick()
{
  var x = parseInt(texto.value);
}

Hola, Pablo! :D

Estás usando el

en una variable () que no estás utilizando en el código. La idea es que use esta variable en el ciclo "for". Así que:

1. puedes cambiar el nombre de la variable "x" para "lineas", como está en tu ciclo "for".
2. puedes cambiar el nombre de la variable "lineas" para "x", en tu ciclo for, pero tienes que eliminar la atribución que hiciste al principio en:

var lineas = 30;

¡Haz el cambio y dime si funcionó! ;)