0

Tengo la siguiente página, que es un administrador de tarea, tengo la opción de agregar tarea con la tecla enter, poder eliminarlas con la X.

Todo esto dentro de un tr, y tengo un checkbox, que lo que quiero es que al presionar cada checkbox, todo el tr.lista se le agreguen unos estilos que están con la clase .complete, pero únicamente al tr que seleccione en el checkbox. Intente un toggle, pero al seleccionar cualquier checkbox, todos me cambian los estilos del primer tr, igual use un foreach pero no funcionó.

HTML:

     <div class="container">
            <header>
                <div class="content-header">
                    <div class="logo">
                        <h1>Todo</h1>
                    </div>
                
    
                    <div class="night">
                        <img src="images/icon-moon.svg" alt="">
                    </div>
                </div>
            </header>  
            
            <div class="buscador">
                <div class="seeker-results">
                    <div class="seeker">
                        <input type="checkbox" id="checkbox">
                        <input type="text"  id="text" placeholder="Create a new todo...">
                    </div>
    
                    <div id="resultados">
                        <table id="results" class="results"> 
    
                        </table>
                    </div>
    
                    <div class="options">
                        <a href="#">All</a>
                        <a href="#">Active</a>
                        <a href="#">Completed</a>
                    </div>
    
                    <div class="footer">
                        <p>Drag and drop to rearder list</p>
                    </div>
                </div>
    
                
            </div>
        </div>

CSS:

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  background: #e4e5f1;
}

.container {
  width: 100%;
  height: 200px;
  background-image: url(../images/bg-mobile-light.jpg);
  background-size: cover;
  background-position: center;
  z-index: 9999;
}

header {
  width: 90%;
  margin: 0 auto;
  position: relative;
  text-align: center;
  position: relative;
}

header .content-header {
  width: 100%;
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 30px;
  margin-bottom: 30px;
}

header .content-header .logo h1 {
  font-size: 1.7rem;
  color: white;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 8px;
}

header .content-header .night img {
  width: 18px;
  cursor: pointer;
}

/** SEEKER **/
.results {
  margin-top: 20px;
}

.results tr.lista {
  border-bottom: 1px solid #cacde8;
  padding: 10px 10px;
}

.results .lista .checkbox {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  border: 1px solid #ddd;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  margin-top: 5px;
}

.results .lista .checkbox:checked {
  background: #56ddff;
  background: linear-gradient(176deg, #56ddff 0%, #bf58f3 100%);
}

.results .lista .value {
  padding-left: 10px;
  color: #393a4c;
  font-size: .9rem;
  font-weight: 700;
  padding: 0 15px;
}

.complete {
  text-decoration: line-through;
  background: #e4e5f1;
  border-radius: 8px;
}

.imagen {
  background-image: url(../images/icon-check.svg);
}

.results .lista td span img {
  position: absolute;
  right: 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 15px;
  height: 15px;
  margin-top: 2px;
  cursor: pointer;
}

table {
  background: white;
  background: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 8px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

lista.complete {
  background: red;
}

JS:

    <script>
    let input = document.querySelector('#text');
    let resultados = document.querySelector('#results')
    
    input.addEventListener('keypress', datosInput);

    function datosInput(){
        teclaEnter = event.keyCode;
    
        if(teclaEnter == 13){
    
            let table = document.createElement('tr');
            table.classList.add('lista');
    
            table.innerHTML = `
                <td><input type="checkbox" class="checkbox" id="checkboxDos" onChange="completo()"> </td>
                <td class="value">${input.value}</td>
                <td><span class="borrar"><img onClick="borrar()" src="../images/icon-cross.svg"></span></td>
            `
            resultados.appendChild(table);
            input.value = '';
        }
    }
    
    function borrar(e){
        let borrar = document.querySelector('.borrar');
        borrar.parentElement.parentElement.remove();
    }
    
    function completo(){
        
    }
</script>

1 respuesta 1

1

Agrega this como argumento a onChange(), eso te dará el elemento de referencia, y a partir de ahí puedes encontrar el elemento deseado y hacer toggle.

let input = document.querySelector('#text');
let resultados = document.querySelector('#results')



input.addEventListener('keypress', datosInput);


function datosInput(){
    teclaEnter = event.keyCode;

    if(teclaEnter == 13){

        let table = document.createElement('tr');
        table.classList.add('lista');

        table.innerHTML = `
            <td><input type="checkbox" class="checkbox" id="checkboxDos" onChange="completo(this)"> </td>
            <td class="value">${input.value}</td>
            <td><span class="borrar"><img onClick="borrar()" src="../images/icon-cross.svg"></span></td>
        `
        resultados.appendChild(table);

        input.value = '';
    }
}

function borrar(e){
    let borrar = document.querySelector('.borrar');
    borrar.parentElement.parentElement.remove();
}

function completo(e){
    e.parentElement.nextElementSibling.classList.toggle('complete');
}
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  background: #e4e5f1;
}

.container {
  width: 100%;
  height: 200px;
  background-image: url(../images/bg-mobile-light.jpg);
  background-size: cover;
  background-position: center;
  z-index: 9999;
}

header {
  width: 90%;
  margin: 0 auto;
  position: relative;
  text-align: center;
  position: relative;
}

header .content-header {
  width: 100%;
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 30px;
  margin-bottom: 30px;
}

header .content-header .logo h1 {
  font-size: 1.7rem;
  color: white;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 8px;
}

header .content-header .night img {
  width: 18px;
  cursor: pointer;
}

/** SEEKER **/
.results {
  margin-top: 20px;
}

.results tr.lista {
  border-bottom: 1px solid #cacde8;
  padding: 10px 10px;
}

.results .lista .checkbox {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  border: 1px solid #ddd;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  margin-top: 5px;
}

.results .lista .checkbox:checked {
  background: #56ddff;
  background: linear-gradient(176deg, #56ddff 0%, #bf58f3 100%);
}

.results .lista .value {
  padding-left: 10px;
  color: #393a4c;
  font-size: .9rem;
  font-weight: 700;
  padding: 0 15px;
}

.complete {
  text-decoration: line-through;
  background: #e4e5f1;
  border-radius: 8px;
}

.imagen {
  background-image: url(../images/icon-check.svg);
}

.results .lista td span img {
  position: absolute;
  right: 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 15px;
  height: 15px;
  margin-top: 2px;
  cursor: pointer;
}

table {
  background: white;
  background: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 8px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

lista.complete {
  background: red;
}
<div class="container">
        <header>
            <div class="content-header">
                <div class="logo">
                    <h1>Todo</h1>
                </div>
            

                <div class="night">
                    <img src="images/icon-moon.svg" alt="">
                </div>
            </div>
        </header>  
        
        <div class="buscador">
            <div class="seeker-results">
                <div class="seeker">
                    <input type="checkbox" id="checkbox">
                    <input type="text"  id="text" placeholder="Create a new todo...">
                </div>

                <div id="resultados">
                    <table id="results" class="results"> 

                    </table>
                </div>

                <div class="options">
                    <a href="#">All</a>
                    <a href="#">Active</a>
                    <a href="#">Completed</a>
                </div>

                <div class="footer">
                    <p>Drag and drop to rearder list</p>
                </div>
            </div>

            
        </div>
    </div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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