como retornar un valor de un addEventListener con funcion??
Publicado por carlos (1 intervención) el 19/07/2018 09:18:15
hola,estoy practicando lo aprendido en javascript y me decidí por hacer una lista de tareas donde puedes añadir tareas principales que luego tendrán mini tareas. Por ejemplo, una tarea principal seria "organizar fiesta de cumpleaños" y las mini-tareas de ella serian comprar pastel,invitar personas, comprar bebidas,comprar globos,etc...
Bien, ya esta casi todo listo, pero el PROBLEMA está en que yo quiero mostrar las tareas principales en forma de botones, para que cuando quieras pasar de una tarea principal a otra solo debas pisar el botón correspondiente.
Para ello NECESITO saber el indice del elemento del botón, ésto lo he logrado con un addEventListener que hace una función que me detecta el indice. hasta aquí todo bien, pero no se porque no me quiere retornar el valor del indice para utilizarlo en otra función. Básicamente es eso, poder retornar el indice para poder usarlo en un array luego.
Dejo el codigo html y js comentado
y este es el javascript
lo que quiero usar en realidad es el indice del div, si te fijas en function se crea un <div> que dentro tiene un <button> cada uno de estos divs con botones dentro se van creando a medida que escribes una nueva lista de tareas y pulsas enter.
EN RESUMEN: el objetivo principal de obtener ese indice es porque dentro de tengo listas de tareas "como por ej: quehaceres del hogar, actividades de fin de semana,etc" y dandole a esos botones puedo ir cambiando de listas para agregar o quitar mas tareas. Me he hecho entender?
Bien, ya esta casi todo listo, pero el PROBLEMA está en que yo quiero mostrar las tareas principales en forma de botones, para que cuando quieras pasar de una tarea principal a otra solo debas pisar el botón correspondiente.
Para ello NECESITO saber el indice del elemento del botón, ésto lo he logrado con un addEventListener que hace una función que me detecta el indice. hasta aquí todo bien, pero no se porque no me quiere retornar el valor del indice para utilizarlo en otra función. Básicamente es eso, poder retornar el indice para poder usarlo en un array luego.
Dejo el codigo html y js comentado
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>app.me</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" type="text/css" media="screen"
href="css/app.css" /> --></head>
<body>
<div class="contenedorPrincipal">
<div class="listasPrincipales">
<input type="text" id="nuevaLista" placeholder="crea tu nueva lista de
tareas">
<!--en este div se guardan los botones que se crean a partir de las
tareas principales que se escriben en el input anterior--><div id="contenedorListas"></div>
</div>
<div class="abuelo">
<input type="text" id="input" placeholder="añade la tarea especifica">
<ul id="listContainer"></ul>
</div>
</div>
<script src="ecmas6/appme.js"></script>
</body>
</html>
y este es el javascript
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
let nuevaLista = document.getElementById('nuevaLista');
const inputText = document.getElementById('input')
const listContainer = document.getElementById('listContainer')
let contenedorListasPrincipales =document.getElementById('contenedorListas')
//hacer clase donde se crean todas las tareas básicas
//con metodos para saber si se completo o no la tarea
class Tarea{constructor(name){
this.name = name;
this.isComplete = false;
}completar(){
this.isComplete = !this.isComplete;
}}class ListaDeTareas{constructor(nameTasksList){
this.nameTasksList = nameTasksList;
this.tasksArreglo = [];
}addTask(tareaToAdd,elemento){
this.tasksArreglo.push(tareaToAdd);
this.renderTask(elemento);
}removeTask(indice,elemento){
this.tasksArreglo.splice(indice,1)
this.renderTask(elemento)
}renderTask(elemento){
let tareas = this.tasksArreglo.map(task =>
`
<li class="tarea ${task.isComplete ? 'complete':''}">
<input type="checkbox"
class="tarea__complete-button"
${task.isComplete ? 'checked':''}
><span class="tarea__name">${task.name}</span>
<a href="#" class="tarea__remove-button">X</a>
</li>
`
);elemento.innerHTML = tareas.reduce((a,b) => a+b,'');
}}//crear nueva lista
let arrList = []; //arreglo donde se meten todas las nuevas tareas
principales
function newList(event) {
if(event.key === "Enter"){
//añadir tareas principales al array vacio
arrList.push(new ListaDeTareas(this.value));
this.value = "";
//dibujar listas de tareas principales
let ordenar = arrList.map(listTask =>
`
<div>
<button style="cursor:pointer">
${listTask.nameTasksList}
</button>
</div>
<br>
`
);contenedorListasPrincipales.innerHTML = ordenar.reduce((a,b)=>
a+b,'');
}}//evento para crear nueva lista principal y mostrarla en forma de
botones
nuevaLista.addEventListener('keyup',newList);
//obtener indice de boton pulsado
function getIndexButton(e) {
let buttonItem = e.target.parentElement;
let buttonsItems =[...contenedorListasPrincipales.querySelectorAll('div')];
let indexPrincipal = buttonsItems.indexOf(buttonItem);
console.log(indexPrincipal);
//*=*=*=*=*=*=*=*=*=*=*=*= he aqui el gran problema amigos
//=*=*=*=*=*=*=*=*=*=*=*=*=
return indexPrincipal;
//quiero usar por fuera esta variable pero no puedo
//no se si sera porque estoy utilizando un parametro "e" en la
//funcion getIndexButton, pero es que es necesario porque es una
//funcion de addEventListener asi que cuando la llamo por fuera no se
//como hacerle para ponerle ese parametro
// les indicaré mas abajo donde la quiero usar exactamente...
}//evento click en el contenedor de los botones para saber indice del
//boton
contenedorListasPrincipales.addEventListener('click',getIndexButton)
function addDOMTask(evento){
if(evento.key === "Enter"){
let task = new Tarea(this.value);
//*=*=*=*=*=*=*=*=*=*=*=*=*=*=AQUÍ es una parte donde quiero usar ése
//índice en el array arrList[indice]
//de esa manera puedo agregar tareas pequeñas a su respectiva tarea
//Principal, ya probé con let i = getIndexButton();
//pero no sirve por culpa de que no tengo parametro para meterle a
//getIndexButton(parametro??) queria hacer arrList[i].addTask(etc...)
//pero no sirvió
arrList[0].addTask(task,listContainer);
this.value = '';
}}//evento para añadir tareas a las tareas principales
inputText.addEventListener("keyup",addDOMTask);
function getTaskIndex(p){
let taskItem = p.target.parentElement;
let tasksItems = [...listContainer.querySelectorAll('li')];
return tasksItems.indexOf(taskItem);
}function removeDOMTask(evento){
if(evento.target.tagName === 'A'){
//*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*= he aqui la misma historia
//*=*=*=*= que necesito el valor del indice clickado
arrList[0].removeTask(getTaskIndex(evento),listContainer);
}}//evento para remover
listContainer.addEventListener('click',removeDOMTask);
function completeDOMTask(evento){
if(evento.target.tagName === 'INPUT'){
//*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=
//aqui igual
arrList[0].tasksArreglo[getTaskIndex(evento)].completar();
//para añadir clase al input seleccionado y mejorar visualmente
evento.target.parentElement.classList.toggle('complete')
}}//evento para completar
listContainer.addEventListener('click',completeDOMTask);
lo que quiero usar en realidad es el indice del div, si te fijas en function
1
newList(event)
EN RESUMEN: el objetivo principal de obtener ese indice es porque dentro de
1
arrList[]
Valora esta pregunta
0
