2

Tengo un problema cuya solución no he encontrado en otras preguntas realizadas, que se me antoja básico y que, a mí ver, debería funcionar.

Tengo el siguiente código:

<div id="uno">
      
</div>

<script>

      addOp=document.getElementById("uno");
      a=1;
      contador=4;
    
    if (a<contador){
      addOp.insertAdjacentHTML('beforeend','<input type="button" value="Enviar" onclick="boton()"></input>');
      addOp.insertAdjacentHTML('beforeend', ' ' + a);
      
    }
    
    function boton(){
     
    
      a=++;
      return a;
    
    }

</script>

Lo que necesito que se haga lo siguiente:

  • Mientras a sea menor que contador, me imprime un botón.
  • El botón llama a la función botón cuando se hace click.
  • La función botón aumenta en 1 el valor de a y cuando a sea mayor que contador, deja de imprimir el botón en el div.

El problema es que no actualiza la variable. Sí la actualiza si haces dentro de la función boton un alert o imprimes el valor de a, pero en cuanto sale de esa función y vuelve al código, a vuelve a valer 1.

Un for o un while no me sirven, pues debe imprimirse cada vez que se hace click y se comprueba la condición. A mi entender el código es correcto, pero debe de haber algo que se me escapa.

Gracias.

2 respuestas 2

1

El problema es que estás esperando que se actualice la vista cuando el modelo se modifica, pero eso no ocurre automáticamente, tienes que hacerlo tú:

const addOp=document.getElementById("uno");
let a=1;
let contador=4;
addOp.insertAdjacentHTML('beforeend','<input type="button" value="Enviar" onclick="boton()"></input>');
addOp.insertAdjacentHTML('beforeend', ' ' + a);


function boton(){
  a++;
  if (a<contador){
    addOp.insertAdjacentHTML('beforeend', ' ' + a);
  }
  return a;
}
<div id="uno">
          
    </div>

1
  • muchas gracias por vuestras respuestas. Ambos me habéis ayudado mucho. Sabía que había algún error de lógica en mi planteamiento pero no veía cuál era. El "a=++" fue un fallo mío al escribir aquí el código, pero al margen de eso, tenéis ambos razón. De veras, gracias. Commented el 21 ene. 2021 a las 15:56
1

Tu código presenta varios problemas:

  • Deberías definir el tipo de variable para addOp, a y contador.
  • El "control" (a < contador) solo lo realizas cuando se inicia el proceso.
  • La expresión a=++; presenta un error de sintaxis.

Solución:

  • Podrías mover el "control" de a < contador a una función llamada control (por ejemplo).
  • Cuando inicias llamas a control() y cada vez que se ejecuta la función botón

let addOp = document.getElementById("uno"),
  a = 1,
  contador = 4;

function controlar() {
  if (a < contador) {
    addOp.insertAdjacentHTML('beforeend', '<input type="button" value="Enviar" onclick="boton()"></input>');
  }
  addOp.insertAdjacentHTML('beforeend', ' ' + a + '<br>');
}

function boton() {
  a++;
  controlar();
}

controlar();
<div id="uno"></div>

1
  • muchas gracias por la respuesta. Valga este comentario como complementario del de abajo. No me dejó marcaros a ambos. Commented el 21 ene. 2021 a las 15:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.