我正在尝试使用用户的邮政编码来请求该地区的代表。为了进行故障排除,我尝试记录邮政编码和包含邮政编码的URL的控制台。
$(document).ready(function() {
//Wait until user submits postal code (ie. K2H6G7)
$("form").on("submit", function(event) {
var request = new XMLHttpRequest();
event.preventDefault();
var searchWord = $("#search").val(); //Take postalcode and apply to url
var url = "https://represent.opennorth.ca/postcodes/" + searchWord + "/?format=apibrowser";
console.log(searchWord);
console.log(url) request.open('GET', url, true);
request.onreadystatechange = function() {
if (request.readyState === 4) {
if (request.status === 200) {
//Connect to API, create cards for each politician instance
var data = JSON.parse(this.response);
data.representatives_centroid.forEach(representatives_centroid => {
const card = document.createElement('div');
card.setAttribute('class', 'card');
const img = document.createElement('img');
img.src = representatives_centroid.photo_url;
const p1 = document.createElement('p');
p1.textContent = `$ {
representatives_centroid.party_name
}
$ {
representatives_centroid.elected_office
}
$ {
representatives_centroid.first_name
}
$ {
representatives_centroid.last_name
}
`
const p2 = document.createElement('p');
p2.textContent = `$ {
representatives_centroid.district_name
}
` //Add data to card
container.appendChild(card);
card.appendChild(img);
card.appendChild(p1);
card.appendChild(p2);
});
} else {
console.log('error');
}
}
}
request.send();
}
());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="form">
<form type="text" class="form-inline" role="form">
<label for="address" name="postalcode">Enter an address or postal code</label>
<input id="search" placeholder="Enter an address or postal code" type="text">
<button id="go">
<span class="glyphicon glyphicon-search"></span> Find
</button>
</form>
</div>
我收到的错误消息是“ TypeError:事件未定义”。我是否缺少明显的东西?
最佳答案
更改右括号
$(document).ready(function() {
//Wait until user submits postal code (ie. K2H6G7)
$("form").on("submit", function(event) {
var request = new XMLHttpRequest();
event.preventDefault();
var searchWord = $("#search").val(); //Take postalcode and apply to url
var url = "https://represent.opennorth.ca/postcodes/" + searchWord + "/?format=apibrowser";
console.log(searchWord);
console.log(url)
request.open('GET', url, true);
request.onreadystatechange = function() {
if (request.readyState === 4) {
if (request.status === 200) {
//Connect to API, create cards for each politician instance
var data = JSON.parse(this.response);
data.representatives_centroid.forEach(representatives_centroid => {
const card = document.createElement('div');
card.setAttribute('class', 'card');
const img = document.createElement('img');
img.src = representatives_centroid.photo_url;
const p1 = document.createElement('p');
p1.textContent = `${representatives_centroid.party_name} ${representatives_centroid.elected_office} ${representatives_centroid.first_name} ${representatives_centroid.last_name}`
const p2 = document.createElement('p');
p2.textContent = `${representatives_centroid.district_name}`
//Add data to card
container.appendChild(card);
card.appendChild(img);
card.appendChild(p1);
card.appendChild(p2);
});
} else {
console.log('error');
}
}
}
request.send();
//THESE //
// Change from }()); to });
});
});