По какой причине получаю пустые input?

Question

Учусь писать сайты на HTML, CSS, JS и JQuery. Решил сделать самый простой калькулятор на них. На JS вроде всё работало, но как только переделал всё под JQuery стал получать пустые поля из input.

var val1 = $("#val1").val();
var val2 = $("#val2").val();
var val3 = $("#val3").val();

function convert(){
    console.log(val1);
    console.log(val2);
    console.log(val3);
    var res1 = Number(val1);
    var res2 = Number(val3);
    switch(val2) {
        case "+":
            var result = res1 + res3;
            break;
        case "-":
            var result = res1 - res3;
            break;
        case "/":
            var result = res1 / res3;
            break;
        case "*":
            var result = res1 * res3;
            break;
    }
    $("#res").val(result);
}

$("#calc").click(convert);

html, body {
    height: 100%;
    margin: 0;
}
 
body {
    display: flex;
    justify-content: center;
    align-items: center;
}
 
input[type="text"] {
    border: 1px solid grey;
    border-radius: 5px;
    padding: 5px;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.3em;
}
 
.container {
    transform: scale(2);
}
 
button {
    background-color: darkorchid;
    opacity: 0.7;
    border: none;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    width: 0px;
}
 
button:hover {
    opacity: 0.8;
}
 
button:active {
    opacity: 1;
}
 
#calc {
    width: 30%;
    margin-right: 10px;
}
 
.result {
    display: flex;
    margin: 10px 0;
}
 
*:focus {
    outline: none;
}

<!DOCTYPE html>
<html>
<head>
    <title>temp...</title>
    <link rel="stylesheet" href="style.css">
    <script src="jquery.js"></script>
</head>
 
<body>
    <div class="container" id="outer">
        <input type="text" id="val1" placeholder="Введите первое значение">
        <br>
        <input type="text" id="val2" placeholder="Введите знак">
        <br>
        <input type="text" id="val3" placeholder="Введите второе значение">
        <div class="result">
            <button id="calc">Вычислить</button>
            <input type="text" disabled id="res">
        </div>
    </div>
    <script src="js.js"></script>
</body>    
</html>

Подскажите, пожалуйста, где я ошибся?

Answer 1

function convert() {
  var val1 = $("#val1").val();
  var val2 = $("#val2").val();
  var val3 = $("#val3").val();
  ...

Answer 2

Вам нужно получать значения input'ов или в самой функции convert или добавить обработчики отслеживающие изменения этих самых input'ов и обновляющие значения переменных

БЛОГ НА HUSL

По какой причине получаю пустые input?

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