Значение переменной не передается функции

Question

Моя проблема заключается в том, что значение передается правильно переменной, но я думаю, что чего-то не хватает, потому что при изменении значения #sol время анимации не выполняется изменение. Может быть, I've должен работать с .on (изменение ....?

$(function() { 
var speed = $('#sol').val(); 
    $(document).on('click', '#engage', function(event){ 
     var $anchor = $(this); 
     $('html, body').stop().animate({ 
      scrollLeft: $($anchor.attr('href')).offset().left 
     }, speed); 
     event.preventDefault(); 
    }); 
}); 


<form id="speed"> 
    <select id="sol" style="display:block;"> 
     <option value="800000">1</option> 
     <option value="400000">2</option> 
     <option value="200000">4</option> 
     <option value="100000">8</option> 
     <option value="50000">16</option> 
     <option value="32000">25</option> 
     <option value="16000">50</option> 
     <option value="100000000000">100</option> 
    </select> 
</form> 

Answer 1

Там нет живого отображения между значением #sol элемента и переменной speed, которая приведет к Updation значения из переменная, когда выбирается значение элемента изменяется

Вместо этого вы прочитать значение выбора элемента, когда вы хотите использовать его в обработчик щелчка

$(function() { 
    $(document).on('click', '#engage', function (event) { 
     var $anchor = $(this); 
     $('html, body').stop().animate({ 
      scrollLeft: $($anchor.attr('href')).offset().left 
     }, +$('#sol').val()); 
     event.preventDefault(); 
    }); 
}); 

---

Другим решением является использование обработчика изменений, который будет обновлять значение переменной всякий раз, когда она изменяется

$(function() { 
    var speed = $('#sol').val(); 

    $('#sol').change(function() { 
     speed = $(this).val(); 
    }); 

    $(document).on('click', '#engage', function (event) { 
     var $anchor = $(this); 
     $('html, body').stop().animate({ 
      scrollLeft: $($anchor.attr('href')).offset().left 
     }, speed); 
     event.preventDefault(); 
    }); 
}); 

Answer 2

$(document).on('click', '#engage', function(event){ 
    var speed = $('#sol').val(); // assign value to speed when ever user click on the element with id engage 
    var $anchor = $(this); 
    $('html, body').stop().animate({ 
     scrollLeft: $($anchor.attr('href')).offset().left 
    }, speed); 
    event.preventDefault(); 
}); 

---

Проблема вы устанавливаете speed значение и не обновляя его со значением изменилось.