检查之前是否已执行过onClick

Question

Basically I have a HTML table with a few rows/columns in it. If a particular title is clicked, then JavaScript will sort that title column by ASC, if clicked again it will sort it by DESC.

However if user tries to click again to set the column to DESC, there is no way for that function to know if the title was clicked before.

To fix this issue I added a hidden HTML input:

<input type="text" style="display: none" value="0" id="sorted">

Once the function is called, I add 1 to the input sorted , then if the function is called again, I check if the input sorted has 1 and if it does then I set the column to DESC.

Is this the best way of dealing with it? I just want to know if there is a better way to make functions recognised a previous clicked action.

var sorted = document.getElementById("sorted").value;

if(sorted === 0){
    if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()){
        //if so, mark as a switch and break the loop:
        shouldSwitch= true;
        break;
    }
   document.getElementById("sorted").value=1;
}else{
    if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()){
        //if so, mark as a switch and break the loop:
        shouldSwitch= true;
        break;
    }
    document.getElementById("sorted").value=0;
}

Answer 1

A couple of ways of doing this; keeping it similar to how you've laid it out already, you could leverage HTML data attributes to do the same kind of thing:

<input type="text" style="display: none" data-sorted="false" id="sorted">

var sorted = document.getElementById("sorted").dataset.sorted;

if (sorted === "false"){
    if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()){
        //if so, mark as a switch and break the loop:
        shouldSwitch = true;
        break;
    }
    sorted.value = "true";
} else {
    if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()){
        //if so, mark as a switch and break the loop:
        shouldSwitch = true;
        break;
    }
    sorted.value = "false";
}

Note that we're now not re-running document.getElementByID... as in your example; setting that value to the sorted variable will be more efficient and give you nicer code.

The other option is as @sumeet kumar mentioned, and use a CSS class to determine sorted status. Personally, I don't love this, as the CSS should be used for styling concerns. Nonetheless, you could do this:

<input type="text" style="display: none" class="sorted" id="sorted">

var sorted = document.getElementById("sorted");

if (sorted.classList.contains('sorted')) {
    if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()){
        //if so, mark as a switch and break the loop:
        shouldSwitch = true;
        break;
    }
    sorted.classList.remove('sorted');
} else {
    if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()){
        //if so, mark as a switch and break the loop:
        shouldSwitch = true;
        break;
    }
    sorted.classList.add('sorted');
}

Note that in the second example we've reversed the order of the if statements; this is to avoid logic like this: if (!sorted.classList.contains('sorted')) which can become confusing.