Не работает изменение цвета фона

Question

Изменение цвета текста работает всегда, а изменение фона работает 1 раз после изменения цвета текста до тех пор, пока опять не поменяю цвет текста:

const colors = ['#ffffff','#808080','#252631','#191a1a','#000000'];
let TextColor;
let BackgroundColor;
$('#customRange1').change(function() {
    TextColor = $(this).val();
    $('body').css('color', colors[TextColor]);
});
$('#customRange2').change(function() {
    BackgroundColor = $(this).val();
    $('body').css('background-color', colors[TextColor]);
});

body {
    background-color: #252631;
    color: #808080;
    overflow: hidden;
    transition: all 2s ease;
}

<body>
    <div class="main col-6">
        <div class="input-group">
            <label for="customRange1" class="form-label">Text color</label>
            <input type="range" class="form-range" min="0" max="4" id="customRange1">
        </div>
        <div class="input-group">
            <label for="customRange2" class="form-label">Background color</label>
            <input type="range" class="form-range" min="0" max="4" id="customRange2">
        </div>
    </div>
</body>

Answer 1

const colors = ['#ffffff', '#808080', '#252631', '#191a1a', '#000000'];
let TextColor;
let BackgroundColor;
$('#customRange1').on('input', function() {
  TextColor = $(this).val();
  $('body').css('color', colors[TextColor]);
});
$('#customRange2').on('input', function() {
  BackgroundColor = $(this).val();
  $('body').css('background-color', colors[BackgroundColor]);
});

body {
  background-color: #252631;
  color: #808080;
  overflow: hidden;
  transition: all 2s ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div class="main col-6">
    <div class="input-group">
      <label for="customRange1" class="form-label">Text color</label>
      <input type="range" class="form-range" min="0" max="4" id="customRange1">
    </div>
    <div class="input-group">
      <label for="customRange2" class="form-label">Background color</label>
      <input type="range" class="form-range" min="0" max="4" id="customRange2">
    </div>
  </div>
</body>

Answer 2

Не заметил ошибку $('body').css('background-color', colors[TextColor]);

БЛОГ НА HUSL

Не работает изменение цвета фона

Ответы (2 шт):