JQueryが追加されない

Question

JQueryを初めて使用しています。私はユーザーからアドレスを受け取り、挨拶メッセージを表示する次のフォームを持っています。また、身体に位置のGoogle api写真を追加します。しかし、私は入力を入力すると何も起こりません。私は間違って何をしていますか？ご協力いただきありがとうございます。

部分HTML：

<form id="form-container" class="form-container"> 
    <label for="street">Street: </label><input type="text" id="street" value=""> 
    <label for="city">City: </label><input type="text" id="city" value=""> 
    <button id="submit-btn">Submit</button> 
</form> 
<hr> 

<h2 id="greeting" class="greeting">Where do you want to live?</h2> 

とjQueryコード：

function loadData() { 

var $body = $('body'); 
var $wikiElem = $('#wikipedia-links'); 
var $nytHeaderElem = $('#nytimes-header'); 
var $nytElem = $('#nytimes-articles'); 
var $greeting = $('#greeting'); 

// clear out old data before new request 
$wikiElem.text(""); 
$nytElem.text(""); 

// load streetview 
var streetStr = $("#street").val(); 
var cityStr = $("#city").val(); 
var address = streetStr + ", " + cityStr; 

$greeting.text('So, you want to live at ' + address + '?'); 

var streetViewUrl = 'http://maps.googleapis.com/maps/api/streetview?size=600x300&location='+ address + ''; 

$body.append('<img class="bgimg" src="' + streetViewUrl + '" >'); 
}; 

$('#form-container').submit(loadData); 

Answer 1

あなたが送信ボタンをクリックしたときにリロード/リフレッシュからページを防ぐためにevent.preventDefault();を使用する必要があります。

$('#submit-btn').on("click", function (event) { 
 
event.preventDefault(); 
 
var $body = $('body'); 
 
var $wikiElem = $('#wikipedia-links'); 
 
var $nytHeaderElem = $('#nytimes-header'); 
 
var $nytElem = $('#nytimes-articles'); 
 
var $greeting = $('#greeting'); 
 

 
// clear out old data before new request 
 
$wikiElem.text(""); 
 
$nytElem.text(""); 
 

 
// load streetview 
 
var streetStr = $("#street").val(); 
 
var cityStr = $("#city").val(); 
 
var address = streetStr + ", " + cityStr; 
 

 
$greeting.text('So, you want to live at ' + address + '?'); 
 

 
var streetViewUrl = 'https://maps.googleapis.com/maps/api/streetview?size=600x300&location='+ address + ''; 
 

 
$('#img').append('<img class="bgimg" src="' + streetViewUrl + '" >'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="form-container" class="form-container"> 
 
    <label for="street">Street: </label><input type="text" id="street" value=""> 
 
    <label for="city">City: </label><input type="text" id="city" value=""> 
 
    <button id="submit-btn">Submit</button> 
 
</form> 
 
<hr> 
 

 
<h2 id="greeting" class="greeting">Where do you want to live?</h2> 
 
<div id="img"></div>