CODEWITHSUNDEEP
javascriptcssdom
Ziatco Felix
Ziatco Felix

Reputation: 97

How to keep the marked item when changing order to asc or desc

When i mark an item and then change its order to asc or desc, the item get unmarked. I'm not sure how to keep it marked.

This is the plnkr code, you can try it here to see how it looks, https://plnkr.co/edit/bSH8A6GwRrKizFTDpfYI?p=info

var idxEditare = -1;
var lista = [];

function adauga(form,event){
    event.preventDefault();
        var obj = {
    };

    obj.itemDes = form.querySelector("[name='itemDes']").value;

    lista.push(obj);
    draw();
    afiseazaLista();
}

function afiseazaLista(){
    document.querySelector("#add-form").reset();
    document.querySelector("#tabel").classList.remove("hidden");
}

function ascundeLista(){
    document.querySelector("#tabel").classList.add("hidden");
}


function empty(){
    var itemInput= document.querySelector("[name='itemDes']").value;

    if(itemInput===""){
        event.preventDefault();
        (alert(`Completeaza spatiile pentru a face o adaugire in lista`));
        return false;
    }

}

function mark(ceva){
    document.querySelector(`#target-${ceva}`).classList.add("description");
}

function asc(){
    lista.sort(function(a,b){
        if(a.itemDes>b.itemDes){
            return 1;
        } else if(a.itemDes<b.itemDes){
            return -1;
        } else{
            return 0;
        }
    });
    draw();
}

function desc(){
    lista.sort(function(a,b){
        if(a.itemDes<b.itemDes){
            return 1;
        } else if(a.itemDes>b.itemDes){
            return -1;
        } else{
            return 0;
        }
    });
    draw();
}

function draw(){
    var str = "";

        for(var i=0;i<lista.length;i++){
            str+=`<tr>
                <td id="target-${i}">${lista[i].itemDes}</td>
                <td>
                    <input type="button" value="Mark as buyed" onClick="mark(${i});"/>
                </td>
            </tr>`;
        }
        document.querySelector("#tabel tbody").innerHTML = str;
}

The item should remain marked even after i change the order to asc or desc.

Upvotes: 2

Views: 75

Answers (1)

mocni_T
mocni_T

Reputation: 179

You don't track changes of buyed items, and each sort you redraw everything without knowledge of buyed items.

So you can save buyed items inside your mark function

   function mark(ceva){  
            lista[ceva].added = !lista[ceva].added;  

            if(lista[ceva].added){
            document.querySelector(`#target-${ceva}`).classList.add("description");
            } else {
            document.querySelector(`#target-${ceva}`).classList.remove("description");
            }
    }

Now you can add or remove buy items, based on state, and now on your draw method check it items are added. If they are added just add class.

function draw(){

            var str = "";

                for(var i=0;i<lista.length;i++){ 
                  var isAdded = lista[i].added ? "description" : "";
                    str+=`<tr>
                        <td id="target-${i}" class='${isAdded}'>${lista[i].itemDes}</td>
                        <td>
                            <input type="button" value="Mark as buyed" onClick=mark(${i}); "/>
                        </td>

                    </tr>`;
                }
                document.querySelector("#tabel tbody").innerHTML = str;
        }

Working demo: https://plnkr.co/edit/L3FrZUYds46caHXaLdFX?p=preview

Upvotes: 2

Related Questions