変数をajax urlとして設定する

Question

ajax URLを変数resに設定しようとしています。

可変式resは異なる文字列の組み合わせです。 コードを見ることができます。

<form id="frm1"> 
    <input type="text" name="fname" value="" placeholder="Update Location"> 
    </form> 
<button class="btn btn-default pull-right" onclick="loadWeather()"type="button"> 
Search 
</button> 

HTMLはここで私は、フォーム内のテキストを取得しようとしています。私は、コンソールにRESの値をチェックすると

の.js

window.onload = loadWeather(); 

var part = "http://api.openweathermap.org/data/2.5/weather?q="; 
var a = encodeURI(part); 
var b = document.getElementById("frm1"); 
var text = b.elements[0].value; 
var urll = "&units=metric&appid=MYKEY"; 
var c = encodeURI(urll); 

var res = a + text + c; 

function loadWeather() { 
    $.ajax({ 
     url: res, 

それは未定義として示されています。

つ以上のエラーがblog.jsでヌル のプロパティ「要素」を読み取ることができませんです：7

私が欲しいのは、最終的なURLがthis-

http://api.openweathermap.org/data/2.5/weather?q=FORMDATA&units=metric&appid=MYKEY

のようなものに等しくなければならないことです

Answer 1

コードに論理エラーがあります。最初の行では：

window.onload = loadWeather(); 

あなたはこの関数はすぐに他のJavaScriptコードの前に呼び出されますを意味し、ページのロードにloadWeatherを関数の呼び出しを行っています。現在のところ、res変数は割り当てられていません。この変数は、関数の呼び出し後に後で入力されます。

変数の割り当て後に関数を呼び出す必要があります。たとえば、次のようなものが動作します。

// window.onload = loadWeather(); 
var part = "http://api.openweathermap.org/data/2.5/weather?q="; 
var a = encodeURI(part); 
var b = document.getElementById("frm1"); 
var text = b.elements[0].value; 
var urll = "&units=metric&appid=MYKEY"; 
var c = encodeURI(urll); 

var res = a + text + c; 
loadWeather() 
function loadWeather() { 
    console.log(res) 
}