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.