Uncaught Referenceerror: Function is not defined

Question

When I call a function, it gives:

Uncaught Referenceerror: Function is not defined

JS:

function __startGame (__nome, __pronom) {
var canvasGame = document.getElementById("__startGame");
var secondEtap = document.getElementById("scndEtapGame");
var confirmChoiceInt = confirm("Você tem certeza que deseja escolher " + __nome + " como " + __pronom + " presidenciável?");
if (confirmChoiceInt) {
    canvasGame.style.display = "none";
    secondEtap.style.display = "block";
    function showMonLvl(a, b) {
        var spanLvl = document.getElementById("uiLvlSpan");
        var spanMon = document.getElementById("uiMonSpan");
        spanLvl.innerHTML = a;
        spanMon.innerHTML = b;
    }
    function addValue(a, b, c) {
        var spanValueEleitor = document.getElementById("eleitorValueMenuContent");
        var spanValueJuiz = document.getElementById("juizValueMenuContent");
        var spanValueJorn = document.getElementById("jornValueMenuContent");
        spanValueEleitor.innerHTML = a;
        spanValueJuiz.innerHTML = b;
        spanValueJorn.innerHTML = c;
    }
    function addValueXp(a, b, c, d, e, f) {

    }
    function changep() {
        var p1 = document.getElementById("u_06");
        p1.style.display = "none";
    }
    showMonLvl(1, "$50");
    addValue("$100", "$25 000", "$15 000");
} else {}
}

HTML:

<img class="img_seta" id="imgSetaDireita" src="imgs/setaDireita_png.png" onclick="changep();"/>

Why will it be?

Answer 1

When you call a function that way onclick="changep();", that is: when you call a function directly in HTML; it has to be in the global scope. Being in the global scope means that the function must be outside of other functions, or closed directly in the window for example like:

window.changep = function() {
    var p1 = document.getElementById("u_06");
    p1.style.display = "none";
}

In this case this function does not use any of the other function __startGame, so you can actually define the function outside of that.

You have another option which is to run this function, or at least what it does inside an event receiver. Then you can know when the element is clicked and run the code you need.

So instead of onclick="changep();" you can do it like this:

var sDireita = document.getElementById('imgSetaDireita');
sDireita.addEventListener('click', function() {
    var p1 = document.getElementById("u_06");
    p1.style.display = "none";
});

or even so, if the function is in the overall scope:

sDireita.addEventListener('click', changep);

Answer 2

Ariel, your problem is the scope, the message you are sending is that the function you are calling is undefined, when trying to access a function/function method __startGame() calling for changep().

You can put an additional parameter to the function __startGame() to perform only a certain task.

Example:

var el = document.getElementById('meuElemtno'); // pega o elemnto button



el.addEventListener('click', function() { // no evento click 
  a('c'); // executa a função a() passando o tipo do metodo que é c();
}, false);


function a(tipo) {
  // encontra a o tipo e executa a função; 
  if (tipo === 'b') {
    b();
  } else if (tipo === 'c') {
    c();
  }

  function b() {
    console.info('acessando metodo b');
  }

  function c() {
    console.info('acessando metodo c');
  }
}

<button type="button" id="meuElemtno">Click me</button>