В настоящее время я работаю над приложением Translate (Via Yandex Api); У меня есть одна проблема, которую я не мог понять ... Если бы кто-то помог мне с этим; Я был бы очень счастлив.
Итак, вот мой индекс. html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Translator App</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!--jQuery CDN-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<section class="main">
<div class="header">
<h1>Welcome to Translator</h1>
<h2>Translate in English,Spanish,German,Turkish</h2>
<div class="language">
<div class="languageto">
<select class="firstlanguages" name="languages" id="langs">
<option value="en">English</option>
<option value="tr">Turkish</option>
<option value="de">German</option>
<option value="sp">Spanish</option>
</select>
</div>
<div class="tolanguage">
<select id="tolanguage" name="tolanguage">
<option value="toeng">Turkish</option>
<option value="totr">English</option>
<option value="tode">German</option>
<option value="tosp">Spanish</option>
</select>
</div>
</div>
<form id="translate-form">
<div class="translate">
<textarea class="firstmsj" name="word" placeholder="Maximum 500 Character" id="word" value="Nasılsın"></textarea>
<textarea class="secondmsj" name="message" disabled placeholder="Your Translate"></textarea>
</div>
<input class="translatebtn" type="submit" value="Translate">
</form>
</div>
</section>
<script src="js/translate.js"></script>
<script src="js/app.js"></script>
</body>
</html>
И у меня есть 2 разных JS файла; Первый - это приложение. js
eventListeners();
function eventListeners(){
let form = document.getElementById("translate-form");
form.addEventListener("submit", translateWord);
document.querySelector('.firstlanguages').onchange = function(){
//Arayüz işlemleri
}
}
let word = document.getElementById("word").value;
let lang = document.getElementById("langs").value;
const translate = new Translate(word,lang);
function translateWord(e){
translate.translateWord();
e.preventDefault();
}
Второй javascript файл - это переводчик. js
function Translate(word,language){
this.apikey = "trnsl.1.1.20200430T094119Z.fcb3cffaccaa7301.9f383b774f2aaea42d9be57e8799a3310f7074c1";
this.word = word;
this.language = language;
// XHR Object
this.xhr = new XMLHttpRequest();
}
Translate.prototype.translateWord = function(){
// Ajax Works
const endpoint = `https://translate.yandex.net/api/v1.5/tr.json/translate?key=${this.apikey}&text=${this.word}&lang=${this.language}`;
this.xhr.open("GET",endpoint);
this.xhr.onload = () =>{
if(this.xhr.status === 200){
console.log(this.xhr.responseText);
}else{
console.log("Hata");
}
}
this.xhr.send();
};
Ошибка в том, что когда я его отправляю; Сообщение об ошибке
translate.js:28 GET https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20200430T094119Z.fcb3cffaccaa7301.9f383b774f2aaea42d9be57e8799a3310f7074c1&text=&lang=en 400 (Bad Request)
и когда мы видим ссылку, мы не видим, что $ {this.word} помещается в мой URL.
Когда я проверяю код после отправки, также xhr.send () был красный ...
this.xhr.send();
За исключением того, что пока все отлично работает. В чем может быть проблема? Спасибо за вашу помощь!