Erro: function 'create' is not defined

Question

Erro: function 'create' is not defined

Navigation

#1 by (2 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I try to create a text in canvas by passing the text that will use the fillText() as the function parameter from a onclick event in the HTML document, but it tells me that the function crear() is not defined.

window.addEventListener("load", function(){
/* Dibujo canvas */

var c = document.getElementById("m");
var ctx = c.getContext('2d');



function crear(texto) {
  
  ctx.fillText(texto,55,60);
  ctx.fillStyle = "#ECECF9";
}
  
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input type="text" id="e" placeHolder="Texto a dibujar.."/>
  <input type="button" value="Enviar" onclick="crear(document.getElementById('e').value)"/>
  <canvas width="100%" height="100%" id="m"></canvas>
</body>
</html>

javascript

asked by Eduardo Sebastian 11.07.2017 в 01:56

source

3 answers

0

onclick expects the function to be global but you have it in the local scope of the event window.addEventListener("load", function(){})

Try making the function visible globally with window:

window.addEventListener("load", function(){
/* Dibujo canvas */

var c = document.getElementById("m");
var ctx = c.getContext('2d');



window.crear = function (texto) {
  
  ctx.fillText(texto,55,60);
  ctx.fillStyle = "#ECECF9";
}
  
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input type="text" id="e" placeHolder="Texto a dibujar.."/>
  <input type="button" value="Enviar" onclick="crear(document.getElementById('e').value)"/>
  <canvas width="100%" height="100%" id="m"></canvas>
</body>
</html>

answered by 11.07.2017 в 02:08

0

It's easier if you divide the tasks a bit.

var c = document.getElementById("m");
var ctx = c.getContext('2d');
var texto;

function escribir(texto) {
  ctx.fillText(texto,55,60);
  ctx.fillStyle = "#ECECF9";
}

function getText() {
    var texto = document.getElementById('e').value;
    escribir(texto);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input type="text" id="e" placeHolder="Texto a dibujar.."/>
  <input type="button" value="Enviar" onclick='getText()'/>
  <canvas width="100%" height="100%" id="m"></canvas>
</body>
</html>

answered by 11.07.2017 в 02:10

Where can I put the TH in this table? GlassFish Shared Libraries

score 2 · Accepted Answer

It does not go because the close function is inside the function of the "load" event. An easy solution is to remove the function as global or assign it to the windows object (which also makes it globally available).

Recommendation

Keep the HTML code separate (whenever possible).

In your case it would mean assigning the behavior of the event click from the Javascript code (for that you have to assign an ID to the button).

window.addEventListener("load", function(){
    /* Dibujo canvas */

    var c = document.getElementById("m");
    var ctx = c.getContext('2d');

    //se define la función
    function crear(texto) {
        ctx.fillText(texto,55,60);
        ctx.fillStyle = "#ECECF9";
    }
    // se asigna la función al botón
    document.getElementById('el-boton').addEventListener('click',function(){ 
        crear(document.getElementById('e').value);
    });
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input type="text" id="e" placeHolder="Texto a dibujar.."/>
  <input type="button" value="Enviar" id="el-boton"/>
  <canvas width="100%" height="100%" id="m"></canvas>
</body>
</html>

Advantages:

HTML travels without code (it's safer)

No need to put global functions (and the code is more ordered)