<!DOCTYPE html>
<html>
<head>
<title>dz</title>
<style>
@import 'https://fonts.googleapis.com/css?family=Ubuntu:400,500&subset=latin,cyrillic';
html, body {
width: 100%; height: 100%;
}
body {
font-family: 'Ubuntu', serif; font-size: 36px;
background: gray; color: #fff;
}
.translate {
display: flex; width: 100%; height: 100%;
justify-content: center; align-items: center;
}
</style>
</head>
<body>
<div class="translate">
<input type="text" id="t1" value="собака">
<select name="select1" id="select1">
<option value="ru">русский</option>
<option value="en">английский</option>
<option value="de">немецкий</option>
<option value="fr">французкий</option>
</select>
<select name="select2" id="select2">
<option value="ru">русский</option>
<option value="en">английский</option>
<option value="de">немецкий</option>
<option value="fr">французкий</option>
</select>
<input type="button" name="" id="but" value="перевести">
<span id="result"></span>
</div>
<script>
var but = document.getElementById('but');
var t1 = document.getElementById('t1');
var select1 = document.getElementById('select1');
var select2 = document.getElementById('select2');
but.onclick = function () {
if (select1.options.selectedIndex == 0) { g1 = 'ru';}
else if (select1.options.selectedIndex == 1) { g1 = 'en'}
else if (select1.options.selectedIndex == 2) { g1 = 'de'}
else if (select1.options.selectedIndex == 3) { g1 = 'fr'}
if (select2.options.selectedIndex == 0) { g2 = 'ru';}
else if (select2.options.selectedIndex == 1) { g2 = 'en'}
else if (select2.options.selectedIndex == 2) { g2 = 'de'}
else if (select2.options.selectedIndex == 3) { g2 = 'fr'}
var lan = g1 +'-'+ g2
var slovo = t1.value;
var langure = lan;
// Создаем объект XMLHttpRequest, при помощи которого будем отправлять запрос
var req = new XMLHttpRequest();
// Сохраняем ключ API, полученный со страницы [url]https://tech.yandex.ru/keys/get/?service=trnsl[/url]
// (с примером ниже работать не будет, нужно получить и вставить свой!)
var API_KEY = 'trnsl.1.1.20181027T160924Z.56d20eb46cad013e.44d95066c24959a194051c7ffe8a509c86e40940';
// Сохраняем адрес API
var url = 'https://translate.yandex.net/api/v1.5/tr.json/translate';
// Формируем полный адрес запроса:
url += '?key=' + API_KEY; // добавляем к запросу ключ API
url += '&text='+slovo; // текст для перевода
url += '&lang='+langure; // направление перевода: с русского на английский
// Таким образом формируется строка вида:
// [url]https://translate.yandex.net/api/v1....ики&lang=ru-en[/url]
var translate = document.querySelector('.translate');
// Назначаем обработчик события load
req.addEventListener('load', function () {
console.log(req.response); // отображаем в консоли текст ответа сервера
var response = JSON.parse(req.response); // парсим его из JSON-строки в JavaScript-объект
// Проверяем статус-код, который прислал сервер
// 200 — это ОК, остальные — ошибка или что-то другое
if (response.code !== 200) {
result.innerHTML = 'Произошла ошибка при получении ответа от сервера:\n\n' + response.message;
return;
}
// Проверяем, найден ли перевод для данного слова
if (response.text.length === 0) {
result.innerHTML = 'К сожалению, перевод для данного слова не найден';
return;
}
// Если все в порядке, то отображаем перевод на странице
result.innerHTML = response.text.join('<br>'); // вставляем его на страницу
});
// Обработчик готов, можно отправлять запрос
// Открываем соединение и отправляем
req.open('get', url);
req.send();
};
</script>
</body>
</html>
добавил отдельный блок для результата и другой фон, ато глаза режет, остальное как есть