Javascript-форум - Кнопка работает только один раз d gthtdjlxb

У меня задание с переводчиком
и проблема в том что кнопка работает один раз
что надо исправить чтобы она работало постоянно(переводила постоянно)
код получился такой

<!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: #00f; 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="перевести">
</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) {
translate.innerHTML += 'Произошла ошибка при получении ответа от сервера:\n\n' + response.message;
return;
}

// Проверяем, найден ли перевод для данного слова
if (response.text.length === 0) {
translate.innerHTML += 'К сожалению, перевод для данного слова не найден';
return;
}

// Если все в порядке, то отображаем перевод на странице
translate.innerHTML += response.text.join('<br>'); // вставляем его на страницу

});



// Обработчик готов, можно отправлять запрос
// Открываем соединение и отправляем

req.open('get', url);
req.send();

}
</script>
</body>
</html>

<!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>