Creé este botón dentro de mi función JS de modo que cada vez que alguien haga clic en mi botón HTML, generará la entrada de texto:

$("#new-item").on('click', function() {
    var text = $('#task').val();    
    $('#list').prepend("<li>" + text + " " + "<button class='started'>Started</button>" + "</li>" + "</br>");
});

La idea surgió aquí.

Ahora quiero darle estilo al botón en mi archivo CSS pero mi código no modifica nada.

Esto es lo que hice en mi css:

.started {font-size: 10px;}

Código HTML:

</head>
<body>
        <header>
            <a href="https://trello.com"></a>
        </header>

        <section>

            <input type="text" id="task">

            <button id="new-item"> Add a card </button>

            <div class="column" id="to-do">
                <h1> To Do </h1>
                <li id="list"></li>
            </div>

            <div class="column" id="doing">
                <h1> Doing </h1>
            </div>

        </section>
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="_js/main.js"> </script>
</body>
-1
jyp95 15 feb. 2018 a las 10:19

2 respuestas

La mejor respuesta

Funciona bien para mi. Lo único que cambié es que en lugar de id="started", usé class="started", porque id siempre debe ser único

$("#new-item").on('click', function() {
  var text = $('#task').val();

  $('#list').prepend("<li>" + text + " <button class='started'>Started</button></li></br>");
});
.started {
  font-size: 10px;
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <a href="https://trello.com">Trello</a>
</header>

<section>

  <input type="text" id="task">

  <button id="new-item"> Add a card </button>

  <div class="column" id="to-do">
    <h1> To Do </h1>
    <li id="list"></li>
  </div>

  <div class="column" id="doing">
    <h1> Doing </h1>
  </div>

</section>
2
Carl Binalla 15 feb. 2018 a las 07:40

Para cambiar el estilo de su botón, use este código

button.started {font-size: 10px;}
0
Muhammed Fayaz 15 feb. 2018 a las 09:41