Insertar contenido en un input con javascript
Publicado por Mary (1 intervención) el 11/09/2016 20:49:16
Hice una lista de tareas con javascript pero en vez de usar elementos li quiero usar input, pero cuando lo hice me aparecio el input vacio. Les dejo el codigo.
Agradeceria mucho su ayuda
html
Script
Agradeceria mucho su ayuda
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="estilo.css">
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/3.0.2/normalize.css">
<title>Lista de Tareas</title>
</head>
<body>
<div class="principal">
<div class="wrap">
<form class="formulario" action="">
<input type="text" id="tareaInput" placeholder="Agrega tu tarea">
<input type="button" class="boton" id="btn-agregar" value="Agregar Tarea">
</form>
</div>
</div>
<div class="tareas">
<div class="wrap">
<ul class="lista" id="lista">
<li><a href="#">1 Lorem ipsum dolor sit amet.</a></li>
<li><a href="#">2 Lorem ipsum dolor sit amet.</a></li>
<li><a href="#">3 Lorem ipsum dolor sit amet.</a></li>
</ul>
</div>
</div>
<script src="javascript.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
(function(){
// Variables
var lista = document.getElementById("lista"),
tareaInput = document.getElementById("tareaInput"),
btnNuevaTarea = document.getElementById("btn-agregar");
// Funciones
var agregarTarea = function(){
var tarea = tareaInput.value,
nuevaTarea = document.createElement("li"), //Aqui creo los elementos
enlace = document.createElement("a"),
contenido = document.createTextNode(tarea);
if (tarea === "") {
tareaInput.setAttribute("placeholder", "Agrega una tarea valida");
tareaInput.className = "error";
return false;
} // Agregamos el contenido al enlace
enlace.appendChild(contenido);
// Le establecemos un atributo href
enlace.setAttribute("href", "#");
// Agrergamos el enlace (a) a la nueva tarea (li)
nuevaTarea.appendChild(enlace);
// Agregamos la nueva tarea a la lista
lista.appendChild(nuevaTarea);
tareaInput.value = "";
for (var i = 0; i <= lista.children.length -1; i++) {
lista.children[i].addEventListener("click", function(){
this.parentNode.removeChild(this);
});
} };var comprobarInput = function(){
tareaInput.className = "";
teareaInput.setAttribute("placeholder", "Agrega tu tarea");
};var eleminarTarea = function(){
this.parentNode.removeChild(this);
}; // Eventos
// Agregar Tarea
btnNuevaTarea.addEventListener("click", agregarTarea);
// Comprobar Input
tareaInput.addEventListener("click", comprobarInput);
// Borrando Elementos de la lista
for (var i = 0; i <= lista.children.length -1; i++) {
lista.children[i].addEventListener("click", eleminarTarea);
}}());
Valora esta pregunta
0