Problems with checkbox and javascript

Question

Problems with checkbox and javascript

Navigation

#1 by (2 votes)

2

Good morning Dear community, I am working on a list of tasks and I am having problems to rescue the value of a checkbox that is created dynamically by a button element, so far I have the following:

<!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>

The js is this:

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]);
    };
};
};

What I want is to click on a checkbox, I want the "Delete Task" button to light up red, but so far I have not been able to.

I would appreciate all the help you can give me.

Greetings.

javascript html5 checkbox

asked by Gustavo Hergueta 29.06.2018 в 17:34

source

1 answer

List view shows only one result Is it possible to deactivate the gps to reduce the battery consumption in an app?

score 2 · Accepted Answer

The problem is that you must capture the checkbox after it has been created, that is, within the function. Something like this:

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>