Функция с возвратом значения input JQuery

Question

Пытаюсь сделать функцию, которая возвращает значение инпут, но никак не могу продумать логику

Пытался сделать булеву переменную, которая становится true по клику на любую кнопку, а в цикле ждал пока переменная не станет true, но в этом случае все просто зависает по очевидным причинам

вот сама форма

Код функции

function getInputValue(amount){
    let inputValue
    let $request = $('#request')
    $request.show()
    let $okButton = $('#request-ok')
    let $maxButton = $('#request-max')
    let $cancelButton = $('#request-cancel')
    $okButton.on('click',function( event ) {
        inputValue = parseInt($('#input-number').val())
        $request.hide()
    })
    $maxButton.on('click',function( event ) {
        inputValue = parseInt(amount)
        $request.hide()
    })
    $cancelButton.on('click',function( event ) {
        inputValue = null
        $request.hide()
    })
    return inputValue
}

Вызов функции let inputValue = getInputValue(amount)

возвращает undefined из-за того, что не ждет пока значение изменится, как я понял

Общий смысл в том, чтобы иметь логику prompt

Answer 1

Javascript - реализует событийную модель. Здесь функции "никого не ждут" и "выполняются до конца" в вашем понимании. В вашем случае нужно использовать технику callback-функций:

function getInputValue(callback) {
  let $request      = $('#request')
  let $okButton     = $('#request-ok')
  let $maxButton    = $('#request-max')
  let $cancelButton = $('#request-cancel')

  function done() {
    $request.hide();
    $okButton.off('click', done);
    $maxButton.off('click', done);
    $cancelButton.off('click', done);
    callback(window.parseInt($('#input-number').val()) || null);
  }

  $okButton.on('click', done);
  $maxButton.on('click', done);
  $cancelButton.on('click', done);
  $request.show()
}

Как это использовать:

// какой-то код вначале...

// понадобилось подождать значение из инпута
getInputValue(function(x) {
      
  // получили значение из инпута
  alert(x);

  // продолжение кода ...

});

Answer 2

Попробуйте вместо JQuery использовать Vanilla.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, height=device-height initial-scale=1.0">
    <title>Show form and check it</title>
</head>
<body>
    <form action="" onsubmit="ValidateMe();">
        <input type="number" id="input-number" />
        <button type="submit">Ok</button>
        <button onclick="SetMax();">Max</button>
        <button onclick="Clear();">Cancel</button>
    </form>
    <script>
        function ValidateMe() {
            let inputValue = document.getElementById('input-number');
            if (inputValue.value != null || inputValue != undefined) {
                alert(inputValue.value);
                return true;
            }
            else {
                alert('inputValue is null');
                return false;
            }
        }
        function SetMax() {
            let inputValue = document.getElementById('input-number');
            inputValue.value += 100;
        }
        function Clear() {
            let inputValue = document.getElementById('input-number');
            inputValue.value = 0;
        }
    </script>
</body>
</html>

БЛОГ НА HUSL

Функция с возвратом значения input JQuery

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