0

Tengo una lista con tareas y necesito que al oprimir enter se agregue la nueva tarea ingresada en el inṕut una vez se oprima enter.

He tratado de hacer definiedo los siguiente pero no me funciona.


app.js

$(document).ready(function()
{
    $('input').keyup(function(e){
      if(e.keyCode == 13)
      {
        var valorTexto = $(this).text();
        $("ul li:last").after( '<li'> + valorTexto)
      }
   });   

});


index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Más tareas</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="wrapper">
    <div class="list">
      <h3>Por hacer:</h3>
      <ul class="todo">
        <li>Sacar la ropa</li>
        <li>Hacer la cama</li>
        <li>Leer un rato</li>
      </ul>
      <input type="text" id="new-task" placeholder="Ingresa una tarea y oprime Enter">
    </div>
  </div>
  <!-- incluye acá jQuery y crea la referencia a app.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script type="text/javascript" src="app.js"></script>
</body>
</html>

style.css

body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }

.list {
  display: inline-block;
  width: 330px;

  vertical-align: top;
  margin: 0 50px;
}

ul {
  font-size: 18px;
  background-color: #f5f5f2;
  padding: 0;
  min-height: 50px;
  border: 1px solid #DBDBD3;
}

ul li {
  color: #66665D;
  list-style-type: none;
  padding: 20px;
  cursor: pointer;
  border-bottom: 1px solid #DBDBD3;
}

ul li:last-child {
  border-bottom: none;
}

input[type=text] {
  box-sizing: border-box;
  font-size: 16px;
  width: 100%;
  border: 1px solid #ccc;
  padding: 13px;
}

introducir la descripción de la imagen aquí

2 respuestas 2

1

hice algunas modificaciones a tu código Javascript:

$(document).ready(function() {
    $('#new-task').keyup(function(e) {
      if(e.keyCode === 13 || e.which === 13) {
        var $valorTexto = $(this).val();
        $(".todo li:last").after('<li>' + $valorTexto + '</li>');
      }
   });   
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

3
  • Como puedo blanquear el input para que no quede con el último dato agregado a la lista. El código que se adapta a lo que necesito es el que maneja el evento del enter ya que el ejercicio no me permite utilizar el evento click. Ya realice varias pruebas y ninguna me funcionó, entre ellas $('#input').val('');. Commented el 28 oct. 2017 a las 4:45
  • Intenta con: $(this).val('');
    – user59642
    Commented el 28 oct. 2017 a las 4:57
  • Había referenciado de manera equivocada el id del input, ya quedó solucionado con $('#new-task').val(''); Commented el 28 oct. 2017 a las 5:00
0

En tu archivo JS o donde escribes tu código javascript/Jquery.

Modificalo por esto

$(document).ready(function(){
    $("#btnAgregarTarea").click(function(){
    	var elementoLista = $("#new-task").val();
        $("ol").append("<li>"+ elementoLista +"</li>");
    });
});

con var elementoLista = $("#new-task").val() recogemos el valor del input con id new-task , y con $("ol").append("<li>"+ elementoLista +"</li>"); Lo agregamos a la lista.

Aquí te dejo el código completo:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#btnAgregarTarea").click(function(){
    	var elementoLista = $("#new-task").val();
        $("ol").append("<li>"+ elementoLista +"</li>");
    });
});
</script>
</head>
<body>

<input type="text" id="new-task" placeholder="Ingrese nueva tarea">

<ol>
  <li>Tarea 1</li>
  <li>Tarea 2</li>
  <li>Tarea 3</li>
</ol>

<button id="btnAgregarTarea">Agregar Tarea</button>

</body>
</html>

Espero que te sirva, saludos.

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.