Как изменить направление градиента?

Question

[moskwin68]

Есть кнопка при клике по которой необходимо сменить направление фонового градиента в блоке #wrapper.

<button id="dir">&uarr;</button>
<div id="wrapper"></div>

Полагаю, что проблема в области видимости переменной. Помогите исправить.

var dir = "to left";
$('#dir').click(function (){
 dir='to right';
});
function upgrade (id) {
 var startcolor = pickers.grstartcolor.toHEXString()	
 var endcolor = pickers.grendcolor.toHEXString()	
 document.getElementById('wrapper').style.background = 'linear-gradient(' + dir + ', ' + startcolor +', ' + endcolor + ')';
}
upgrade('grstartcolor');
upgrade('grendcolor');

Comments

[Andrew]

Функцию передавайте с нужным значением в обработчик клика, так вы просто значение переменной меняете.

Answer 1

[Владимир Проскурин]

Вы не вызываете upgrade, вы просто меняете значение. Переустановка градиента не происходит.

Comments

[moskwin68]

Добавил еще 2 строки которые были в коде, но не осознаю что еще нужно вызвать.

[Владимир Проскурин]

moskwin68, не, я не о них, они делают начальную установку градиента. И нужно такую установку вызывать после каждого изменения dir. Просто добавьте вызов upgrade

$('#dir').click(function (){
 dir='to right'; // меняем направление градиента
 upgrade(); // Вызываем установку градиента с новым направлением
});

Лучше конечно не использовать глобальные переменные, а передавать направление в upgrade.