JS pobranie poprzedniej wartości w evencie change/input

0

Mam pytanie o JSa czystego bez jquery. Potrzebuję wiedzieć w evencie change jaka była wartość w select przed zmianą. Przykładowy kod:

<select id="selInput">
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
        <option value="D">D</option>
    </select>
<script>
     const selectInput = document.getElementById('selInput');

     selectInput.addEventListener('change', function (e) {
         if (e.beforeChangeValue == 'A' && this.value ==  'D') {     //jak dostać coś w stylu e.beforeChangeValue?
             //do something if changed A to D
         }
     });
 </script>

Jedyne rozwiązanie jakie przychodzi mi do głowy to zapisywanie do zmiennej *obok * wartości po każdej zmianie w select, tak by przy kolejnym wywołaniu eventa mieć poprzednią wartość. Tutaj jednak mam zastrzeżenie, bo robić się zaczyna spaghetti code, jeśli kod jest dużo bardziej rozbudowany i w kilku miejscach z kodu JSa nawet zmieniamy value selecta. Pamiętanie w każdym tym miejscu by do tej zmiennej obok zapisać poprzednią wartość tworzy bardzo słaby kod. W C# czy JAVA, bez problemu w evencie można otrzymać poprzednią i zaktualizowaną wartość.

1

Nie trzeba robić spaghetti, możesz sobie zrobić funkcję pomocniczą.

function addChangeListenerWithMemory (element, listener) {
  let previousValue = element.value;
  element.addEventListener('change', function (e) {
    e.beforeChangeValue = previousValue;
    previousValue = this.value;
    listener.call(this, e);
  });
}
1

Możesz sobie dorobić w html własny atrybut oldValue i uniwersalną funkcję oldValue = value wywoływaną pod koniec każdej funkcji odpalanej na onchange.

1 użytkowników online, w tym zalogowanych: 0, gości: 1