Problem with Alert

Asked

Viewed 29 times

-2

Good afternoon,

I’m starting with Javascript/Jquery I’m having some problem in my project’s Alert. It may be a logic problem, but because I’m starting out, I can’t see where the error is. It is a Bootstrap button generator, where the user inserts Text and the color of the button, when clicking "Generate" the button is added. However, I would like to place an Alert with the content of the text at each button clicked generated.

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta charset="UTF-8">
  <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
  <!-- <link rel="stylesheet" href="css/estilos.css"> -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
  <div class="row">
    <div class="col s12 teal white-text center">
      <h1>Criador de Botões</h1>
    </div>
  </div>

  <div class="row">
    <div class="container">
      <div class="input-field col s5"><input type="text" placeholder="Texto do botão" id="inp-text"></div>
      <div class="input-field col s5">

        <select id="sel-color">
          <option value="teal">Teal</option>
          <option value="blue">Blue</option>
          <option value="green">Green</option>
          <option value="pink">Pink</option>
          <option value="black">Black</option>
        </select>
      </div>
      <div class="col s2">
        <button class="btn teal" id="btn-create">CRIAR</button>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="container" id="container">
      <div class="col s4">
      </div>
    </div>
  </div>

  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/materialize.min.js"></script>
  <!-- <script type="text/javascript" src="js/popular.js"></script> -->
  <script>
    $(document).ready(function () {
      $('select').formSelect();

      $('#btn-create').click(function () {
        texto = $('#inp-text').val();
        cor = $('#sel-color').val();
        $('#container').append('<button class="btn ' + cor + '">' + texto + '</button> ');
        $('#container > button').click(function () {
          alert($(this).text());
        });
      });

    });
  </script>
</body>

</html>

But when you click the created buttons, the Alerts repeat themselves.

javascript html jquery css materialize

1 answer

-2


$('#container > button').click(function () {
  alert($(this).text());
});

By making the call of this method, you are creating a Event Listener on all buttons that are children of the #container.

As this method is called multiple times, you are creating multiple Event listeners for the same elements.

Try it this way:

$('#btn-create').click(function () {
  const texto = $('#inp-text').val();
  const cor = $('#sel-color').val();
  const botao = $('<button class="btn ' + cor + '">' + texto + '</button>');

  $('#container').append(botao);
  botao.click(function () {
    alert($(this).text());
  });  
});

  • Thank you so much! It solved my problem and the code got much better. I will study about Event listeners.

Browser other questions tagged javascript html jquery css materialize

You are not signed in. Login or sign up in order to post.