Zmiana tesktu diva po kliknięciu na niego

Witam mam taki problem m.in po kliknięciu na diva nie "swapuje" mi tak jak bym chciał. W sensie:

var sortup = "rosnąco, według daty";
var sortdown = "malejąco, według daty";
sort = document.getElementById('sort').innerHTML;

function Sort() {
  if (sort == sortdown)
  {
    document.getElementById('sort').innerHTML = sortup;
  }
  else if (sort == sortup)
  {
  document.getElementById('sort').innerHTML = sortdown;
  }
}

//#############

<div id="sort" onclick = "Sort()">malejąco, według daty</div>

I taka sprawa jest, że po kliknięciu na niego zmienia zawartość na sortup, ale potem z powrotem żeby zmienił na sortdown już nie pyka dlaczego?

Po pierwsze: var sort a nie sort. Ale to nie jest teraz Twój problem.
Po drugie: przyzwyczaj się do używania ===. Ale to też nie przyczyna.
Po trzecie: o ile var sort = document.getElementById('sort') byłoby okej, bo sort byłby referencją do obiektu, o tyle innerHTML powoduje, że sort jest ustalone raz i samo z siebie się nie zmieni, choćby obiekt uległ zmianie.
Rozwiązania dwa:

1. Przenieść var sort = document.getElementById('sort').innerHTML; do ciała funkcji
2. Zostawić przed funkcją var sort = document.getElementById('sort'); a w środku warunków mieć if (sort.innerHTML == sortdown) i analogicznie

Drugi sposób: https://jsfiddle.net/70gy3osj/13/

Saalin napisał(a):

Po pierwsze: var sort a nie sort. Ale to nie jest teraz Twój problem.
Po drugie: przyzwyczaj się do używania ===. Ale to też nie przyczyna.
Po trzecie: o ile var sort = document.getElementById('sort') byłoby okej, bo sort byłby referencją do obiektu, o tyle innerHTML powoduje, że sort jest ustalone raz i samo z siebie się nie zmieni, choćby obiekt uległ zmianie.
Rozwiązania dwa:

1. Przenieść var sort = document.getElementById('sort').innerHTML; do ciała funkcji
2. Zostawić przed funkcją var sort = document.getElementById('sort'); a w środku warunków mieć if (sort.innerHTML == sortdown) i analogicznie

Drugi sposób: https://jsfiddle.net/70gy3osj/13/

Dzięki, zamykam