How can I recognize the property .value of a DOM object [closed]

-1

var texte = document.getElementById("texto_lineas");
var boton = document.getElementById("botoncito");
boton.addEventListener("click", dibujoPorClick );

var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
var lineas = 30;
var l = 0;
var yi, xf;

for(l = 0; l < lineas; l++)
{
      yi = 10 * l;
      xf = 10 * (l + 1)
      dibujarLinea("red", 0, yi, xf, 300);
      console.log("linea " +  l);
}

dibujarLinea("red", 1,1,1,299)
dibujarLinea("red", 1,299,299,299)

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 p = texto.value;
alert("no me toques " + p);
}

I do not recognize the variable p containing texto.value . What do I do?

    
asked by ferten 26.11.2017 в 19:55
source

1 answer

1

Good friend I hope this is what you are looking for greetings

1 - You had a badly declared variable texte that you call as texto

2 - add one to the function dibujoPorClick to be able to change the canvas lines by which you enter by input

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 lineas = 30;
var l = 0;
var yi, xf;

for(l = 0; l < lineas; l++)
{
      yi = 10 * l;
      xf = 10 * (l + 1)
      dibujarLinea("red", 0, yi, xf, 300);
      //console.log("linea " +  l);
}

dibujarLinea("red", 1,1,1,299)
dibujarLinea("red", 1,299,299,299)

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 p = texto.value;
//alert("no me toques " + p);

var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
var lineas = texto.value;
var l = 0;
var yi, xf;
d.width=d.width;
for(l = 0; l < lineas; l++)
{
      yi = 10 * l;
      xf = 10 * (l + 1)
      dibujarLinea("red", 0, yi, xf, 300);
      //console.log("linea " +  l);
}

dibujarLinea("red", 1,1,1,299)
dibujarLinea("red", 1,299,299,299)
}
<input placeholder="Numero de lineas" id="texto_lineas" type="text" name="" value="">
<button id="botoncito" type="button" name="button">Botoncito</button>

<canvas id="dibujito" width="300" height="300"></canvas>
    
answered by 26.11.2017 в 20:07