2

Buenos días Estimada comunidad, estoy trabajando en una lista de tareas y estoy teniendo problemas para rescatar el valor de un checkbox que es creado de manera dinámica por un elemento button, hasta ahora tengo lo siguiente:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lista de tareas</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<main>
    <div class="contenedor-formulario">
        <form action="#">
            <label for="">Articulo:</label>
            <input type="text" id="idarticulo" class="campo" 
             name="txtarticulo">
            <button id="idboton">Agregar Tarea</button>
        </form>
    </div>
    <div class="Contenedor-tarea">
    </div>
    <div class="btn">
        <button id="borrar">Borrar Tarea</button>
    </div>
</main>
<script src="app.js"></script>
</body>
</html>

El js Es el siguiente:

let txtcampo = document.getElementById("idarticulo");
let btn = document.getElementById("idboton");
let paneltarea = document.querySelector(".Contenedor-tarea");


btn.addEventListener("click",agregarTarea);

function agregarTarea(e){
 e.preventDefault();
let check = document.createElement("INPUT");
check.className="check-tarea";
check.setAttribute("type","checkbox");

let tarea = document.createElement("li");
tarea.className = "list-tarea"
tarea.textContent = txtcampo.value;


paneltarea.appendChild(check);
paneltarea.appendChild(tarea);
txtcampo.value = "";
txtcampo.focus();
}


let chequeotarea = document.querySelectorAll(".check-tarea");
let listTarea = document.querySelectorAll(".list-tarea");
console.log(chequeotarea);

let btn2 = document.getElementById("borrar");

btn2.addEventListener("click", borrarTarea);

function borrarTarea(){
for (var i = 0; i<paneltarea.children.length; i++){
    if (paneltarea.children[i].checked == true){
        paneltarea.removeChild(paneltarea.children[i].nextElementSibling);
        paneltarea.removeChild(paneltarea.children[i]);
    };
};
};

Lo que quiero es al dar click en un checkbox, quiero que el boton "Borra Tarea" se ilumine de rojo, pero hasta ahora no he podido.

Agraceria toda la ayuda que me puedan prestar.

Saludos.

1 respuesta 1

2

El problema es que debes de capturar el checkbox despues que ha sido creado, o sea dentro de la funcion. Algo asi:

let txtcampo = document.getElementById("idarticulo");
let btn = document.getElementById("idboton");
let paneltarea = document.querySelector(".Contenedor-tarea");

btn.addEventListener("click",agregarTarea);

function agregarTarea(e){
 e.preventDefault();
let check = document.createElement("INPUT");
check.className="check-tarea";
check.setAttribute("type","checkbox");

let tarea = document.createElement("li");
tarea.className = "list-tarea"
tarea.textContent = txtcampo.value;

paneltarea.appendChild(check);
paneltarea.appendChild(tarea);
txtcampo.value = "";
txtcampo.focus();

let btn2 = document.getElementById("borrar");

check.addEventListener( 'change', function() {
    if(this.checked) {
        btn2.style.border = '2px solid red'; 
    } else {
       btn2.style.border = 'none'; 
    }
});

}

let btn2 = document.getElementById("borrar");

btn2.addEventListener("click", borrarTarea);

function borrarTarea(){
for (var i = 0; i<paneltarea.children.length; i++){
    if (paneltarea.children[i].checked == true){
        paneltarea.removeChild(paneltarea.children[i].nextElementSibling);
        paneltarea.removeChild(paneltarea.children[i]);
    }
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lista de tareas</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<main>
    <div class="contenedor-formulario">
        <form action="#">
            <label for="">Articulo:</label>
            <input type="text" id="idarticulo" class="campo" 
             name="txtarticulo">
            <button id="idboton">Agregar Tarea</button>
        </form>
    </div>
    <div class="Contenedor-tarea">
    </div>
    <div class="btn">
        <button id="borrar">Borrar Tarea</button>
    </div>
</main>
<script src="app.js"></script>
</body>
</html>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.