Translating input into 12 different languages using Microsoft Translator, js, and HTML

Question

Problem: I am trying to translate a few words into 12 languages. I've been translating what I need with Google Sheets, thought it takes forever because I have to copy and past each language result into where I want it. What would save me a lot of time is if I was able to have an input field that would translate the input sting into each of the 12 languages at the push of a button.

I got a Microsoft Translator Key and region last night. I have downloaded Visual Studio 2022. I've been using the browser link in Visual Studio and uploading the code to Blogger. I dont code. I have a basic understanding of HTML and CSS.

I just want to input a word or two, and have other languages result below after I push the 'Translate' button.

Thought with the code below, nothing results. I type in a word, press the button, and nothing happens. Can anyone help me out?

<!DOCTYPE html>
<html>
<body>

<h2>Text Translation</h2>

<p><input type="text" id="myText" placeholder="Enter text to translate"></p>

 <button id="B1" onclick="translateText()">Translate</button>

<p id="zh"></p>
<p id="es"></p>
<p id="el"></p>
<p id="ja"></p>
<p id="uk"></p>
<p id="de"></p>
<p id="hi"></p>
<p id="ko"></p>
<p id="te"></p>
<p id="ar"></p>
<p id="he"></p>
<p id="am"></p>

<script>
    // Language codes according to ISO 639-1 codes
    var languages = ['zh', 'es', 'el', 'ja', 'uk', 'de', 'hi', 'ko', 'te', 'ar', 'he', 'am'];

    async function translateText() {
        var text = document.getElementById("myText").value;

        var subscriptionKey = "key";
        var endpoint = "https://api.cognitive.microsofttranslator.com/";
        var region = "region;

        languages.forEach(async function (lang) {
            var response = await fetch(endpoint + 'translate?api-version=3.0&from=en&to=' +     lang, {
                method: 'POST',
                headers: {
                    'Ocp-Apim-Subscription-Key': subscriptionKey,
                    'Ocp-Apim-Subscription-Region': region,
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify([{ 'myText': text }])
            });

            var data = await response.json();
            var translatedText = data[0].translations[0].text;
            document.getElementById(lang).innerHTML = `Translation in ${lang}:     ${translatedText}`;
            B1.addEventListener('enter',translatedText)
        });
    }
</script>

</body>
</html>`your text`

Translating input into 12 different languages using Microsoft Translator, js, and HTML

0 Answers0