No cambia el valor de mi variable JS

[SrTrp]

Traigo un dato de una tabla via ajax, pero esta variable supuesta mente cambia al momento que se lo asigno pero despues quiero volver a usarla y no aparece el valor.

Código (javascript) [Seleccionar] Expandir


// aqui la eh dejado así null o vacia
var nl = 0;
$("#st").click(function (e) {
  obNiveles(id); 
  Cniveles();
});

function Cniveles(){   
//AQUI APARECE 0 NULL O UNDEFINED, TODO DEPENDE DE QUE LE ASIGNE AL INICIO
   console.log(nl);
  var dv= document.getElementById("levels");

  var tabla   = document.createElement("table");
  var tblBody = document.createElement("tbody");
var cclevels =0;
  for (var i = 0; i < 5; i++) {   
    var hilera = document.createElement("tr");

    for (var j = 0; j < nl; j++) {     
      //AQUI NUNCA ENTRA COMO SU VALOR NUNCA PASA DE 0
      }
    }

    tblBody.appendChild(hilera);
  }

  tabla.appendChild(tblBody);
  dv.appendChild(tabla);
  }



function obNiveles(rt){
  var STEP = {
          "x"  : rt
  };
  $.ajax({
          data:  STEP,
          url:   'scripts/datagame1.php',
          type:  'POST',
          success:function(data){
         nl = data;
//aqui me muestra "recibe:2,valor puesto:2", que es totalmente correcto
         console.log('recibe:'+data+',valor puesto:'+nl);

  }
         
  });
}



[[u]nsigned]

Pueden ser muchas cosas, pero creo que es porque no estas manejando bien la asincronía de JS, y la linea 5 se ejecuta inmediatamente despues de la linea 4, asi que no le da tiempo a realizarse la llamada ajax y asignarle el valor correcto a nl. Entonces cuando se resuelve la peticion y le asignas el valor a dicha variable ya es tarde, para la funcion Cniveles sigue valiendo 0 o null. prueba con esto:

Código (javascript) [Seleccionar] Expandir



// aqui la eh dejado así null o vacia
var nl = 0;
$("#st").click(async function (e) { //defino la funcion como asincrona
  await obNiveles(id);  //fuerzo al script a esperar que se temrine de ejecutar la funcion y su llamada ajax
  Cniveles();
});



Ademas tenes un typo (error de tipeo). Pegue tu codigo en mi editor y me sale que el bracket de la linea 29 sobra. Revisa bien que todos tus bloques esten correctamente cerrados con sus {}

[@XSStringManolo]

// aqui la eh dejado así null o vacia
/* Ni está null, ni está vacia ni sin definir. Es un number con valor 0. No es lo mismo. */
var nl = 0;

$("#st").click(function (e) {
  /* Usa mínimo 2 espacios de identación. A veces usas 1 y otras 2. Comprueba los ajustes de tu editor. */
  ObNiveles(id); 
  Cniveles();
});

function Cniveles() {   
  //AQUI APARECE 0 NULL O UNDEFINED, TODO DEPENDE DE QUE LE ASIGNE AL INICIO
  /* Depende del valor de nl cuando hagas la llamada a la función Cniveles. */
  console.log(nl);

  var dv = /* Deja siempre el mismo espacio entre el identificador de la variable, el operador de asignación y la expresión. */ $("#levels");
  /* No es coherente que antes obtengas por id de esta forma $("#st") y ahora utilizes el método getElementById, usa siempre la misma forma. */

  var tabla = document.createElement("table");

  var tblBody = document.createElement("tbody");

  var cclevels = 0;

  for (var i = 0; i < 5; i++) {   
    var hilera = document.createElement("tr");

    for (var j = 0; j < nl; j++) {     
      //AQUI NUNCA ENTRA COMO SU VALOR NUNCA PASA DE 0
      /* Depende del valor que tenga nl cuando llames a la función */
    }
  }
  tblBody.appendChild(hilera);
}

/* Aquí estás fuera de la función Cniveles y estás cerrando un corchete de un cuerpo que no existe o que no pegaste en el foro. Te lo dejo comentado. */
tabla.appendChild(tblBody);
dv.appendChild(tabla);
/*}*/

/* Sigue siempre el mismo patrón a la hora de nombrar variables y funciones. En la función anterior usas una mayúscula de primer letra y en esta usas minúscula */

function ObNiveles(rt) {
  var STEP = {
    "x"  : rt
  };

  $.ajax({
    data: STEP,
    url: 'scripts/datagame1.php',
    type: 'POST',
    success: function(data) {
      nl = data;
      //aqui me muestra "recibe:2,valor puesto:2", que es totalmente correcto
      console.log('recibe:'+data+',valor puesto:'+nl);
      /* Aquí estás en una función anónima callback. Esta función se llama cuando se complete la petición al servidor. Todo código que dependa del nuevo valor de nl deber ir aquí o ser llamada desde aquí. */

    }
  });
}

[SrTrp]

[quote author=nsigned link=topic=504494.msg2220947#msg2220947 date=1588473689]
Pueden ser muchas cosas, pero creo que es porque no estas manejando bien la asincronía de JS, y la linea 5 se ejecuta inmediatamente despues de la linea 4, asi que no le da tiempo a realizarse la llamada ajax y asignarle el valor correcto a nl. Entonces cuando se resuelve la peticion y le asignas el valor a dicha variable ya es tarde, para la funcion Cniveles sigue valiendo 0 o null. prueba con esto:

Código (javascript) [Seleccionar] Expandir



// aqui la eh dejado así null o vacia
var nl = 0;
$("#st").click(async function (e) { //defino la funcion como asincrona
 await obNiveles(id);  //fuerzo al script a esperar que se temrine de ejecutar la funcion y su llamada ajax
 Cniveles();
});



Ademas tenes un typo (error de tipeo). Pegue tu codigo en mi editor y me sale que el bracket de la linea 29 sobra. Revisa bien que todos tus bloques esten correctamente cerrados con sus {}

[/quote]

Me sigue arrojando lo mismo "undefined", y lo de la 29 lo pase por alto y no borre esa llave ya que es de un if que puse pero lo veo insignificante por ello no lo pegue aqui.
___________________________________________________________________

a lo de la variable nl, me refería que eh probado con ponerla null, en 0, o sin asignarle valor.
Como dices que todo depende del valor de nl eh probado llamar la función Cniveles una ves que alla echo success ya que le haya asignado el nuevo valor de nl, pero no dentro de la funcion donde hago la petición ajax si me da el valor correcto nl.
___________________________________________________________________
Después de ya un tiempo checando ver que pudo a ver sido ya que la variable nl solo la llego a usar en esas 2 funciones obte por esta solución.
La verdad no se porque me ocurrió este error ya que eh echo bastantes veces y jamas tuve problemas similares a esto.
Gracias a ambos ya eh aprendido varias cosillas que no sabia por ustedes.

Código (javascript) [Seleccionar] Expandir


var nl = 0;
$("#st").click(function (e) {
 obNiveles(id);    
});
function Cniveles(nx){  
  console.log(nx);
 var dv= document.getElementById("levels");
 var tabla   = document.createElement("table");
 var tblBody = document.createElement("tbody");
var cclevels =0;
 for (var i = 0; i < 5; i++) {    
   var hilera = document.createElement("tr");

   for (var j = 0; j < nx; j++) {      
     }
   }
   tblBody.appendChild(hilera);
 tabla.appendChild(tblBody);
 dv.appendChild(tabla);
 }  
function obNiveles(rt){
 var STEP = {
         "x"  : rt
 };
 $.ajax({
         data:  STEP,
         url:   'scripts/datagame1.php',
         type:  'POST',
         success:function(data){
        nl = data;
        Cniveles(nl);
        console.log('recibe:'+data+',valor puesto:'+nl);
 }
 });
}


[@XSStringManolo]

Código (javascript) [Seleccionar] Expandir

var nl = 0;
$("#st").click(function (e) {
  obNiveles(id);
});



function Cniveles(nx) {
  console.log(nx);
  var dv = document.getElementById("levels");
  var tabla = document.createElement("table");
  var tblBody = document.createElement("tbody");
  var cclevels = 0;

  for (var i = 0; i < 5; i++) {
    var hilera = document.createElement("tr");
    for (var j = 0; j < nx; j++) {
      /* Nada de momento. */
    }
  }

  tblBody.appendChild(hilera);
  tabla.appendChild(tblBody);
  dv.appendChild(tabla);
}



function obNiveles(rt) {
  var STEP = {
    "x" : rt
  };
 
  $.ajax({
    data: STEP,
    url: 'scripts/datagame1.php',
    type: 'POST',
    success: function(data) {
      nl = data;
      Cniveles(nl);
      console.log('recibe:'+data+',valor puesto:'+nl);
    }
  });
}

Vuelvo a insistir, deberías tener una mejor consistencia en el código que usas. Te estás complicando mucho la vida por no ordenar el código bien y no cuesta nada.

Aquí tienes un artíctulo al respecto:  http://developinginspanish.com/2018/03/31/guia-de-estilo-javascript-de-google/