2
respuestas

Duda!! Codigo para ingresar ingredientes mediante <button>

Referente al curso Lógica de programación: Conceptos primordiales, en el capítulo Aprovechando las ventajas de los arrays y actividad ¡No hay ingredientes repetidos aquí!

por ITTER GUSTAVO SCALVENZI
| 141k xp | 42 posts

Buen día! Quise realizar un código donde pueda ir ingresando los ingredientes por medio de " button" pero no pude. A continuación es el código que realice que obviamente no funciona, si alguno me podría guiar estaría muy agradecido, muchas gracias!

<meta charset="UTF-8">

<h1>Recetas de Armando</h1>

<input/>
<button>Añadir Ingrediente</button>

<script>



    var cantidad = parseInt(prompt("Cuantos ingredientes tiene la receta?"));
    var ingredientes = [];

   var input = document.querySelector("input");
   input.focus();
   //var ingrediente = input.value;

   function aniadirIngrediente(){

            ingredientes.push(input.value);
            input.value ="";
            input.focus();
       }



        var button = document.querySelector("button");
        var contador = 0;
        while(contador < cantidad){

            button.onclick = aniadirIngrediente;
        }
        console.log(ingredientes);


</script>
2 respuestas
por Estudiante
| 192.1k xp | 107 posts

Hola Gustavo

No es necesario un while, ya que el botón es el que se encarga de esperar los clicks del usuario y ejecutar aniadirIngrediente(). Igualmente te faltaba el incremento del contador dentro del while, por lo cual se había generado un bucle infinito.

La verificación de si está completa la cantidad total de ingredientes la puedes hacer directamente en aniadirIngrediente().

Te dejo tu código con los cambios para que funcione:

<meta charset="UTF-8">

<h1>Recetas de Armando</h1>

<input/>
<button>Añadir Ingrediente</button>

<script>

    var cantidad = parseInt(prompt("Cuantos ingredientes tiene la receta?"));
    var ingredientes = [];

    var input = document.querySelector("input");
    var button = document.querySelector("button");
    var contador = 0;

    input.focus();

    function aniadirIngrediente(){
        if (contador < cantidad) {
            ingredientes.push( input.value;);
            contador++;
            input.value ="";
            input.focus();
        } else {
            alert("Ya ingresó todos los ingredientes!");
            console.log(ingredientes);
        }
    }

    button.onclick = aniadirIngrediente;

</script>
por ITTER GUSTAVO SCALVENZI
| 141k xp | 42 posts

Muchas gracias José!