Хочу сделать что при нажатии кнопка постепенно становится зеленой, но не могу понять, что я делаю не так?

Question

[holllop]

вот моё решение

<button class="send" id="submit_button" onclick="fillButton()">Записать</button>

function fillButton() {
  var button = document.getElementById('submit_button');
  var color = 'green';
  var animationDuration = 2000; // Длительность анимации в миллисекундах

  var currentWidth = 0;
  var targetWidth = button.offsetWidth;

  var intervalId = setInterval(function() {
    if (currentWidth >= targetWidth) {
      clearInterval(intervalId);
      return;
    }

    currentWidth += 1;
    button.style.background = linear-gradient(to right, ${color} ${currentWidth}px, transparent ${currentWidth}px);
  }, animationDuration / targetWidth);
}

но что-то не так с градиентом, а что не могу понять.

Answer 1

[Михаил Р.]

Заменить:

button.style.background = linear-gradient(to right, ${color} ${currentWidth}px, transparent ${currentWidth}px);

На:

button.style.background = `linear-gradient(to right, ${color} ${currentWidth}px, transparent ${currentWidth}px)`;

Если бы Вы использовали современную IDE, например WebStorm (PhpStrom итп), то она сразу бы подсказала, где у Вас проблема:

Comments

[holllop]

Я юзаю, VScode. Думаю она тоже может считаться современной IDE просто я не все плагины может поставил.