Variable undefined

3

If I put the variable contador out of function , the return on alert is undefined . But if I put it inside function , it returns the correct value but does not increase. What am I doing wrong?

var qtdeCampos = 0;
var contador = 0;

function addCampos() {

    var validacampo = $('#campo'+contador).val();
    alert(validacampo);

    var elem = document.getElementById("produto");
    var prod = elem.options[elem.options.selectedIndex];
    var elem2 = document.getElementById("versao");
    var versao = elem2.options[elem2.options.selectedIndex];

    var prodversao = prod.text+" | "+versao.text;

    if (validacampo == prodversao){
        alert("Não é possivel adicionar produto repetido");
    }else{
        var objPai = document.getElementById("campoPai");
        //Criando o elemento DIV;
        var objFilho = document.createElement("div");
        //Definindo atributos ao objFilho:
        objFilho.setAttribute("id","filho"+qtdeCampos);

       //Inserindo o elemento no pai:
       objPai.appendChild(objFilho);
       //Escrevendo algo no filho recém-criado:
       document.getElementById("filho"+qtdeCampos).innerHTML = "<input readonly type='text' class='prod' id='campo"+qtdeCampos+"' name='campo[]' value='"+prodversao+"'> <input type='button' onclick='removerCampo("+qtdeCampos+")' value='X'>";
       qtdeCampos++;
       contador++;
       document.getElementById("cont").value = qtdeCampos;
    }
}

function removerCampo(id) {
    var objPai = document.getElementById("campoPai");
    var objFilho = document.getElementById("filho"+id);

    //Removendo o DIV com id específico do nó-pai:
    var removido = objPai.removeChild(objFilho);
}
    
asked by anonymous 31.03.2016 / 23:00

2 answers

0

I think your problem is that you're trying to get a '# campo0' element that does not yet exist, and it's not a problem with the 'counter'. You must have at least 1 element '' # field '+ counter' to make this call in JQuery. Try the following, replace the line:

var validacampo = $('#campo'+contador).val();

By:

// Verifica se já tem algum campo inserido, senão não tenta chamar
    if(contador > 0) {
    var validacampo = $('#campo'+(contador-1)).val();
    alert(validacampo);
    } else {
  //Seta para null apenas para não entrar no alert "Não é possivel adicionar produto repetido"
    validacampo = null;
    }
    
31.03.2016 / 23:09
2

This may be happening because of the variable definition scope.

In the example below contador is set twice, one in the global scope and another in a function that contains the addCampos function. The result is as follows:

  

Global: 0
  wrapperAddCampos: undefined
  addCampos: undefined

However, if you comment on line 6 ( var contador; ), your result will be as follows:

  

Global: 0
  wrapperAddCampos: 0
  addCampos: 0

This happens because the variable scope is inherited hierarchically; if variables of the same name are defined in descending scopes, subsequent scopes will be given a reference to the new variable of the same name.

var qtdeCampos = 0;
var contador = 0;

function wrapperAddCampos(){
  
  var contador;
  
  document.write('wrapperAddCampos: ' + contador + "<br/>");

  function addCampos() {
  document.write('addCampos: ' + contador + "<br/>");
    alert(validacampo);
    contador++;
  }

  addCampos();
}

document.write('Global: ' + contador + "<br/>");
wrapperAddCampos();
    
01.04.2016 / 15:27