0

Quiero que en mi código al momento de presionar un botón me muestre 100 botones separados pero solo he logrado hacer que muestre uno

Este es el código:

<html>
  <head>
    <title>Botones</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>
  <body>
  <button type="button" id="button">Botón</button>
    <button type="button" id="show">Start</button> 

    <script>
      $(function(){
        $('#show').click(function(){
          $('#button').toggle();
        });
      })
    </script>
  </body>
</html>
1
  • 3
    ¿Los 100 botones ya existen o hay que crearlos dinamicamente?
    – Marcos
    Commented el 5 mar. 2021 a las 13:38

1 respuesta 1

0

Podrías hacer un prepend para insertar contenido. Voy a colocarle un id al body (solamente como ejemplo, puedes hacerlo en un div u otra etiqueta o colocarle estilos para cambiarlos de lugar, esto insertará al principio del body).

  • Cuando hagamos clic en el botón con id -> `show:
    • Con un bucle, por ejemplo hacemos un prepend o inserción de una línea HTML de ejemplo, esto añadirá 10 veces el contenido del prepend dentro de la etiqueta donde el atributo sea test.

$(function() {
  $('#show').click(function() {
    for (var i = 0; i <= 10; i++) {
      $('#test').prepend('<button type="button" id="button">Botón</button>');
    }
  });
})
<html>

<head>
  <title>Botones</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

<body id="test">
  <button type="button" id="button">Botón</button>
  <button type="button" id="show">Start</button>
</body>

</html>

2
  • 1
    No necesitas ID en el cuerpo, puedes acceder con $(body) y, definitivamente, no es buena idea que todos los botones tengan mismo ID. Referencia: developer.mozilla.org/es/docs/Web/HTML/Global_attributes/id
    – Triby
    Commented el 5 mar. 2021 a las 15:09
  • Sí, efectivamente estás en lo cierto. Igual puede utilizar el contador del bucle para renombrar los IDs o usar la etiqueta. Pero es solamente un ejemplo. Gracias.
    – Adrian
    Commented el 5 mar. 2021 a las 15:43

Tu Respuesta

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