Search code examples
javascriptxmlhttprequest

I cannot get CallBack / Javascript Api

Currently I am working on Translate App ( Via Yandex Api ); I have one problem that I could not understand... If Someone would help me with it; I'd be very happy.

So Here is my index.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>

And I have 2 Different JS files ; First is App.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();
}

Second javascript file is Translate.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();


};

The mistake is , whenever I submit it; The error message is ; 

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)

and when we see the link we cannot see ${this.word} is placed in my URL.

When I check the code after submit, also xhr.send() has been red...

    this.xhr.send();

Except that everything works perfectly so far. What could be the issue? Thank you for your help!

Solution

  • You are getting an empty this.word because you are instantiating the Translate object out of the event handler:

    const translate = new Translate(word,lang);

    Initially, the input is empty, hence the blank space in this.word.

    Solution: move the variables and instantiate inside the translateWord handler, so that they get updated on each search.

    function translateWord(e){
    let word = document.getElementById("word").value;
    let lang = document.getElementById("langs").value;
    const translate = new Translate(word,lang);
    translate.translateWord();
    e.preventDefault();
}

    You will see, now it responds with 200 and the corresponding JSON data.