ユーザー入力がキャプチャ/ストアされない

Question

JavaScriptとJqueryコードでこのonclick関数が機能しない理由を理解しようとしています。

JavaScriptコードの "userInput"を参照し、 "userDate"という変数に格納しています。何らかの理由で、ユーザの入力が捕捉されたり記憶されたりしない。

これは私のHTMLです：

<form role="form"> 
 
      <p> Enter the date: 
 
      <input id="userInput" type="text" placeholder="yyyy-mm-dd" autofocus required></p> 
 
      <button id="convert" type="submit" class="btn btn-primary btn-lg" padding="center"> 
 
      <span class="glyphicon glyphicon-euro"></span> 
 
      </button> 
 
     </form>

これは私のJSコードです：

$(function() { 
 

 
    // cache the DOM element 
 
    var $currencies = $("#currencies"); 
 
    var $userInput = $("#userInput"); 
 

 
    // We are listening on the 'document', 
 
    // for a click on an element with an ID of #convert in the HTML 
 
    $("#convert").on("click", function() { 
 
    var userDate = $userInput; 
 
    // testing 
 
    console.log(userDate); 
 
    alert ("Handler for .click() is called."); 
 

 
    // AJAX call for GET request 
 
    $.ajax({ 
 
    type: 'GET', 
 
    url: 'http://xxx.xx', 
 
    success: function(currencies) { 
 
     console.log("success func is called"); 
 
     console.log(userDate); 
 
     $.each(currencies, function(i, currency){ 
 
     $currencies.append("<div> EUR: " + currencies.rates["EUR"] + ", date: " + currencies.date + "</div>"); 
 
     }); 
 
    }, 
 
    // error handling for my request 
 
    error: function() { 
 
     alert("error loading currencies"); 
 
    } 
 
    }); 
 
}); 
 
});

Answer 1

変更

var userDate = $userInput; 

var userDate = $userInput.val(); 

に$ユーザ入力は、入力要素を保持するjQueryオブジェクトへの参照です。 .val()を使用すると、その入力要素のテキスト値が返されます。