Написал такой код, который взаимодействует со Star Wars API (SWAPI)- он принимает от пользователя значение из инпута и ищет совпадения на сайте. Селектом можно выбрать конкретный тип поиска-корабль, персонаж или планету и ограничить поиск. Как сделать рефакторинг- написать такую функцию, которая будет принимать как аргумент select.value, и в зависимости от значения подставлять нужную разметку? Как сделать, чтобы данные для этой разметки подставлялись из объекта dateToInsert?
let searchButton = document.querySelector('.searchButton');
let search = document.querySelector('.search');
let searchResult = document.querySelector('.search_result');
let name = document.querySelector('.name');
let height = document.querySelector('.height');
let mass = document.querySelector('.mass');
let birth_year = document.querySelector('.birth_year');
let films_count = document.querySelector('.films_count');
let select = document.querySelector('.select');
let div1 = document.querySelector('.div1');
let div2 = document.querySelector('.div2');
let div3 = document.querySelector('.div3');
let div4 = document.querySelector('.div4');
let div5 = document.querySelector('.div5');
let response;
window.onload = function () {
select = document.querySelector('.select');
let api = "https://swapi.dev/api/";
let url = api + select.value + "/?search=";
url += search.value;
getRevenueByID = async (arr) => {
let request = await fetch(url);
if (request.ok) { // если HTTP-статус в диапазоне 200-299
response = await request.json();
} else {
alert("Ошибка HTTP: " + response.status);
}
if (response.count == 0) {
alert("К сожалению, данные не получены по запросу: " + url);
return;
}
// alert("Найдено персонажей:" + response.count);
for (let i = 0; i < response.results.length; i++) {
let l1 = document.createElement('li');
l1.setAttribute('name', i)
l1.textContent = response.results[i].name;
searchResult.appendChild(l1);
}
};
};
searchButton.addEventListener('click', function () {
while (searchResult.firstChild) {
searchResult.removeChild(searchResult.firstChild);
}
if (search.value != '') {
onload();
getRevenueByID();
search.value = '';
} else {
alert('Пустая строка');
}
});
searchResult.addEventListener('click', function (ev) {
let target = event.target;
if (target.className != 'search_result') {
let index = target.getAttribute('name');
if (select.value == 'people') {
div2.innerHTML = 'Рост:<span class="height"></span>';
div3.innerHTML = 'Вес:<span class="mass"></span>';
div4.innerHTML = 'Год рождения:<span class="birth_year"></span>';
div5.innerHTML = 'В скольки фильмах появлялся:<span class="films_count"></span>';
name = document.querySelector('.name');
height = document.querySelector('.height');
mass = document.querySelector('.mass');
birth_year = document.querySelector('.birth_year');
films_count = document.querySelector('.films_count');
name.textContent = response.results[index].name;
height.textContent = response.results[index].height;
mass.textContent = response.results[index].mass;
birth_year.textContent = response.results[index].birth_year;
films_count.textContent = response.results[index].films.length;
}
if (select.value == 'planets') {
div2.innerHTML = 'День(часов):<span class="height"></span>';
div3.innerHTML = 'Год(дней):<span class="mass"></span>';
div4.innerHTML = 'Ландшафт:<span class="birth_year"></span>';
div5.innerHTML = 'Популяция:<span class="films_count"></span>';
name = document.querySelector('.name');
height = document.querySelector('.height');
mass = document.querySelector('.mass');
birth_year = document.querySelector('.birth_year');
films_count = document.querySelector('.films_count');
name.textContent = response.results[index].name;
height.textContent = response.results[index].rotation_period;
mass.textContent = response.results[index].orbital_period;
birth_year.textContent = response.results[index].terrain;
films_count.textContent = response.results[index].population;
}
if (select.value == 'starships') {
div2.innerHTML = 'Модель:<span class="height"></span>';
div3.innerHTML = 'Стоимость в кредитах:<span class="mass"></span>';
div4.innerHTML = 'Пассажиров:<span class="birth_year"></span>';
div5.innerHTML = 'Длинна:<span class="films_count"></span>';
name = document.querySelector('.name');
height = document.querySelector('.height');
mass = document.querySelector('.mass');
birth_year = document.querySelector('.birth_year');
films_count = document.querySelector('.films_count');
name.textContent = response.results[index].name;
height.textContent = response.results[index].model;
mass.textContent = response.results[index].cost_in_credits;
birth_year.textContent = response.results[index].passengers;
films_count.textContent = response.results[index].length;
}
}
});
//данные для разметки
var dateToInsert = {
people: {
height: "рост",
mass: "вес",
birth_year: "год рождения",
films_count: "в каком количестве фильмов появлялся",
},
starships: {
model: "модель",
cost_in_credits: "стоимость в кредитах",
passengers: "пассажиров",
length: "длина",
},
planets: {
rotation_period: "день (часов)",
orbital_period: "год (дней)",
terrain: "ландшафт",
population: "население",
}
}
// необходимая функция
function toggleMarking () {
}
Простой
