В настоящее время я создаю проект, в котором пользователь может получить доступ к паре каблуков из Etsy, и ссылки на результаты будут отображаться на странице, однако, VSC, похоже, не улавливает часть моего синтаксиса.Я не знаю, пропускаю я что-то или нет, но я немного растерялся.При поиске пары каблуков в раскрывающемся списке не отображается мое предупреждающее сообщение и не отображается выбранная обувь.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello Heels Capstone</title>
<link rel="stylesheet" href="index.css">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<center>
<h1>Hello Gorgeous! What's your style?</h1>
<form>
<select class="form-control">
<option value="Select Heels">Choose Your Style</option>
<option value="Pump Heels">Pump Heels</option>
<option value="Glitter Heels">Glitter Heels</option>
<option value="Kitten Heels">Kitten Heels</option>
<option value="Lace Up Heels">Lace Up Heels</option>
<option value="Low Heels">Low Heels</option>
<option value="Mid Heels">Mid Heels</option>
<option value="High Heels">High Heels</option>
<option value="Wedge Heels">Wedge Heels</option>
<option value="Sandal Heels">Sandal Heels</option>
<option value="Mule Heels">Mule Heels</option>
<option value="Block Heels">Block Heels</option>
</select>
<button type="submit">Find Heels</button>
</form>
<div id="root">
</div>
</center>
</div>
<script src="index.js"></script>
</body>
</html>
JAVASCRIPT
'use strict'
const selectUrl = 'https://openapi.etsy.com/v2/listings/active.js';
const apiKey = 'hwox3uujwstcvm3eibnbf9rf';
function formatQueryParams(params) {
const queryItems = Object.keys(params)
.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
return queryItems.join('&');
}
function displayResults(responseJson) {
let htmlStr=''
for(let i=0; i<responseJson.results.length; i++){
let r=responseJson.results[i]
htmlStr+=`<a href="${r.url}"><h1>${r.title}</h1><div>${r.price}</div></a>`
}
$('#root').html(htmlStr);
}
function getEtsyInfo(query,limit=10) {
const params = {
api_key: apiKey,
keywords: query,
limit: limit,
};
const queryString = formatQueryParams(params)
const url = selectUrl + '?' + queryString;
console.log(url);
$.ajax({
url: url,
jsonp: "callback",
dataType: "jsonp",
data: {
format: "json"
},
success: function( response ) {
console.log( response );
displayResults(response);
},
error: function(xhr, status, error){
console.log(xhr.status,error)
},
complete:function(){
console.log('complete called')
},});
function watchForm() {
$('form').submit(event => {
event.preventDefault();
console.log($('select').val())
});
}
getEtsyInfo(($('select').val()))
};
$(watchForm);
getEtsyInfo(($('select').val()))
if($('select').val() === "Select Heels")
{ alert("Please select heels"); return; }
});
}
$(watchForm);