Jump to content

Translation Website


brooke_theperson

Recommended Posts

Please help, I am not exactly sure on how to make this work. I have created two buttons. On one you type in a spanish word to recieve that translation. The translation should appear like this: gato~cat, or something similar to this. I have begun working on the spanish button, but I do not know how to continue. The translation does not show up. Please help. Thanks so much!!!

 

Here is the html:

 

 

<!DOCTYPE html><html><head>    <link rel='stylesheet' href='style.css'/>    <script src='script.js'></script></head><body><div class = "border"><div class = "border2">    <div class = "header">        <h3>Espanol Dictionary</h3>    </div>    <div class = "search">        <button class = "spanish" onclick="spanishWord()">            Spanish        </button>        <button class = "english"onclick="englishWord()">            English        </button>    </div>    <div class = "body">        <div class = "dot1"><div class = "d1"></div></div>        <div class = "dot2"><div class = "d1"></div></div>        <div class = "dot3"><div class = "d1"></div></div>        <div class = "dot4"><div class = "d1"></div></div>        <div class = "dot5"><div class = "d1"></div></div>        <div class = "dot6"><div class = "d1"></div></div>        <div class = "dot7"><div class = "d1"></div></div>        <div class = "dot8"><div class = "d1"></div></div>        <div class = "dot9"><div class = "d1"></div></div>        <div class = "dot10"><div class = "d1"></div></div>        <div class = "dot11"><div class = "d1"></div></div>        <div class = "dot12"><div class = "d1"></div></div>        <div class = "dot13"><div class = "d1"></div></div>        <div class = "dot14"><div class = "d1"></div></div>        <div class = "dot15"><div class = "d1"></div></div>        <div class = "dot16"><div class = "d1"></div></div>        <div class = "dot17"><div class = "d1"></div></div>        <div class = "dot18"><div class = "d1"></div></div>        <div class = "dot19"><div class = "d1"></div></div>        <div class = "dot20"><div class = "d1"></div></div>        <div class = "dot21"><div class = "d1"></div></div>        <div class = "dot22"><div class = "d1"></div></div>        <div class = "dot23"><div class = "d1"></div></div>        <div class = "dot24"><div class = "d1"></div></div>        <div class = "dot25"><div class = "d1"></div></div>        <div class = "dot26"><div class = "d1"></div></div>        <div class = "dot27"><div class = "d1"></div></div>        <div class = "dot28"><div class = "d1"></div></div>        <div class = "dot29"><div class = "d1"></div></div>        <div class = "dot30"><div class = "d1"></div></div>        <div class = "dot31"><div class = "d1"></div></div>        <div class = "dot32"><div class = "d1"></div></div>        <div class = "dot33"><div class = "d1"></div></div>        <div class = "dot34"><div class = "d1"></div></div>        <div class = "dot35"><div class = "d1"></div></div>        <div id = "translation"></div>        <div class = "dot101"><div class = "d1"></div></div>        <div class = "dot102"><div class = "d1"></div></div>        <div class = "dot103"><div class = "d1"></div></div>        <div class = "dot104"><div class = "d1"></div></div>        <div class = "dot105"><div class = "d1"></div></div>        <div class = "dot106"><div class = "d1"></div></div>        <div class = "dot107"><div class = "d1"></div></div>        <div class = "dot108"><div class = "d1"></div></div>        <div class = "dot109"><div class = "d1"></div></div>        <div class = "dot110"><div class = "d1"></div></div>        <div class = "dot111"><div class = "d1"></div></div>        <div class = "dot112"><div class = "d1"></div></div>        <div class = "dot113"><div class = "d1"></div></div>        <div class = "dot114"><div class = "d1"></div></div>        <div class = "dot115"><div class = "d1"></div></div>        <div class = "dot116"><div class = "d1"></div></div>        <div class = "dot117"><div class = "d1"></div></div>        <div class = "dot118"><div class = "d1"></div></div>        <div class = "dot119"><div class = "d1"></div></div>        <div class = "dot120"><div class = "d1"></div></div>        <div class = "dot121"><div class = "d1"></div></div>        <div class = "dot122"><div class = "d1"></div></div>        <div class = "dot123"><div class = "d1"></div></div>        <div class = "dot124"><div class = "d1"></div></div>        <div class = "dot125"><div class = "d1"></div></div>        <div class = "dot126"><div class = "d1"></div></div>        <div class = "dot127"><div class = "d1"></div></div>        <div class = "dot128"><div class = "d1"></div></div>        <div class = "dot129"><div class = "d1"></div></div>        <div class = "dot130"><div class = "d1"></div></div>        <div class = "dot131"><div class = "d1"></div></div>        <div class = "dot132"><div class = "d1"></div></div>        <div class = "dot133"><div class = "d1"></div></div>        <div class = "dot134"><div class = "d1"></div></div>        <div class = "dot135"><div class = "d1"></div></div>    </div>    <div class = "previousSearches">        </div>    <div class = "footer">        </div></div></div>    </body></html>

 

I don't think the css is necessary.

Here is the javascript:

 

 

function word(spanish,english){    this.spanish = spanish;    this.english = english;};function translate(word){    for (var key in translation){        translation[key].spanish + translation[key].english;    }    document.getElementById("translation").innerHTML = str;}var translation = [];translation["gato"] = new word("gato","cat")function spanishWord(){var spanish = prompt("Type in Spanish word to receive the translation.");    switch (spanish){        case 'gato':translate("gato");break;        default:            console.log("I do not know that word.");    }}function englishWord(){var spanish = prompt("Type in English word to receive the translation.");    switch (english){        case "cat":            console.log(gato);            break;        default:            console.log("I do not know that word.");    }}

 

 

As you can see I have only created one word and one outcome. I will expand a lot once I have all the function and everything sorted out. Please help so that the translation appears on the screen! Note: I am still kind of a newbie, and don't know much yet. I would appreciate anybody's help. Thanks!!

Edited by brooke_theperson
Link to comment
Share on other sites

Use [CO DE] [ /CODE] tags to show code in your posts. I don't know what you expected this function to do:

function translate(word){    for (var key in translation){        translation[key].spanish + translation[key].english;    }    document.getElementById("translation").innerHTML = str;}
You pass a parameter word that is never used. You loop through each item in the translation object, concatenate two of its properties, but then you don't assign the result of that to any variable. At the end of the function you set the innerHTML of an element to the value of str, which is a variable that is not defined inside the function.
Link to comment
Share on other sites

I have one more question. I added some more words, but now the wrong translation comes up.

Here is my new javascript:

 

function word(spanish,english){    this.spanish = spanish;    this.english = english;};function translate(word){    for (var key in translation){        var str = translation[key].spanish +" ~ " + translation[key].english;    }    document.getElementById("translation").innerHTML = str;}var translation = [];translation["gato"] = new word("gato","cat")translation["perro"] = new word("perro","dog")translation["hola"] = new word("hola","hello")function spanishWord(){var spanish = prompt("Type in Spanish word to receive the translation.");    switch (spanish){        case 'gato':translate("gato");break;        case 'perro':translate("perro");break;        case 'hola':translate("hola");break;        default:            console.log("I do not know that word.");    }}function englishWord(){var spanish = prompt("Type in English word to receive the translation.");    switch (english){        case "cat":            console.log(gato);            break;        default:            console.log("I do not know that word.");    }}

 

As you can see I added more words, and more cases.

The problem is, when I type in "gato" in response to the promt, "hola~hello" shows up. Do you know why this might be happening?

Link to comment
Share on other sites

Your translate function is only showing the last element in the array. What's also a problem is that arrays can only have numbers as indices, if you want a string index you must use an object (Object syntax uses curly braces instead of square brackets).

 

I'll simplify your code for you. Here are a few key points:

1. You don't need a word() prototype, you can just create a literal object

2. The switch() parts aren't necessary because you can just check to see if the item exists in the translation object.

3. You need two different objects, one for English and one for Spanish. In each object, the keys represent the language you're translating from and the values represent the language you're translating to.

var translation = {};// Spanish dictionarytranslation.spanish = {};translation.spanish["gato"] = "cat";translation.spanish["perro"] = "dog";translation.spanish["hola"] = "hello";// English dictionarytranslation.english = {};translation.english["cat"] = "gato";translation.english["dog"] = "perro";translation.english["hello"] = "hola";// Translate functionfunction translate(language, word){    if(translation[language]) {        if(translation[language][word]) {            document.getElementById("translation").innerHTML = word + " ~ " + translation[language][word];        } else {            alert("I don't know that word.");        }    } else {        alert("There is no language " + language);    }}// Prompt the user for a wordfunction spanishWord(){    var word = prompt("Type in Spanish word to receive the translation.");    translate("spanish", word);}function englishWord(){    var word = prompt("Type in English word to receive the translation.");    translate("english", word);}
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...