Sou iniciante no JS já estudei até a parte de loops, ai dei uma paradinha para revisar tudo o que vi e fazer alguns exercícios.
Fiz um algoritmo QUE TRADUZ para Inglês, Espanhol e Português uma tabela com os horários da maré.
O algoritmo lê uma função modelo com parâmetros > logo em baixo há outra função que vai ser chamada no evento onclick
, esta função chama a função modelo alterando os parâmetros de acordo com o idioma vigente
O problema é que ficou muito extensa, dai eu só fiz até a parte que traduz o Título, o Botão e o Prompt de escolher o idioma... vamos lá:
JAVASCRIPT
//funcao modelo
function traducao(langarray1,langarray2,lang1,lang2,tabletitle1,tabletitle2,buttonvalue1,buttonvalue2,chooselang,errormsg){
document.getElementById("tabelatitle"); //pega a tag <h1> do titulo da tabela
translan = new Array(langarray1,langarray2); // variaveis do idioma que aparece no texto do prompt como string
transtext = prompt(chooselang + translan[0] + ", " + translan[1]); // Prompt para escolher o idioma
if(transtext == lang1){ // escolha do idioma == idioma 1
tabelatitle.innerHTML = tabletitle1; // traduzir o <h1> para idioma escolhido
document.getElementById("botao").innerHTML = buttonvalue1; // traduzir o botao para o idioma escolhido
}
else if(transtext == lang2){ // se escolha do idioma == idioma 2
tabelatitle.innerHTML = tabletitle2; // traduzir <h1> para idioma escolhido
document.getElementById("botao").innerHTML = buttonvalue2; // traduzir o botao para o idioma escolhido
}
else{ // se deixar vazio ou escolha invalida, apresentar msg de erro
alert(errormsg);
}
}
//executar traducao() com condicoes
function traduzir(){
document.getElementById("tabelatitle");
//pt - se idioma current = pt > apresentar opções de traduzir para ingles ou espanhol no prompt. e se escolher uma das duas > traduz titulo, botão e texto do prompt.
if(tabelatitle.innerHTML == "Tabela de horários da Maré"){ //
return traducao("Ingles","Espanhol","Ingles","Espanhol","Sea hours table","Tabla de horarios de las mareas","Translate","Traducir","Escolha um idioma: ","Você precisa escolher um idioma");
}
//en - se o idioma current for ingles - apresentar opções de traduzir para Portugues e Espanhol > e se escolher uma das duas > traduz titulo, botão e texto do prompt.
else if(tabelatitle.innerHTML == "The tide times table"){
return traducao("Spanish","Portuguese","Spanish","Portuguese","Tabla de horarios de las mareas","Tabela de horários da Maré","Traducir","Traduzir", "Choose a language: ","You need to choose a language");
//es - se o idioma current for espanhol - apresentar opções de traduzir para Portugues e Ingles > e se escolher uma das duas > traduz titulo, botão e texto do prompt.
}
else{
return traducao("Inglés","Portugués","Inglés","Portugués","The tide times table","Tabela de horários da Maré","Translate","Traduzir", "Eligir un idioma","Usted tiene que elegir un idioma");
}
}
HTML da tabela (caso queiram testar)
<h1 id="tabelatitle">Tabela de horários da Maré</h1>
<table class="tg">
<tr>
<th class="tg-xdyu">Dia</th>
<th class="tg-031e">Manhã</th>
<th class="tg-031e">Tarde</th>
<th class="tg-031e">Noite</th>
</tr>
<tr>
<td class="tg-031e" id="segunda">Segunda-Feira</td>
<td class="tg-031e">Calmo</td>
<td class="tg-031e">Agitado</td>
<td class="tg-031e">Agitado</td>
</tr>
<tr>
<td class="tg-031e">Terça-Feira</td>
<td class="tg-031e">Normal</td>
<td class="tg-031e">Calmo</td>
<td class="tg-031e">Normal</td>
</tr>
<tr>
<td class="tg-031e">Quarta-Feira</td>
<td class="tg-031e">Agitado</td>
<td class="tg-031e">Agitado</td>
<td class="tg-031e">Agitado</td>
</tr>
<tr>
<td class="tg-031e">Quinta-Feira</td>
<td class="tg-031e">Calmo</td>
<td class="tg-031e">Normal</td>
<td class="tg-031e">Agitado</td>
</tr>
<tr>
<td class="tg-031e">Sexta-Feira</td>
<td class="tg-031e">Normal</td>
<td class="tg-031e">Normal</td>
<td class="tg-031e">Normal</td>
</tr>
<tr>
<td class="tg-031e">Sábado</td>
<td class="tg-031e">Calmo</td>
<td class="tg-031e">Normal</td>
<td class="tg-031e">Agitado</td>
</tr>
<tr>
<td class="tg-031e">Domingo</td>
<td class="tg-031e">Calmo</td>
<td class="tg-031e">Calmo</td>
<td class="tg-031e">Calmo</td>
</tr>
</table>
<button onclick="traduzir()" id="botao">Traduzir</button>
A tabela precisa ser traduzida na íntegra após o usuário executar a função.
Sendo que eu só consegui fazer isso atribuindo ID e condição para CADA palavra da tabela e dessa forma o algoritmo fica cansativo, extenso e pouco profissional, vejamos:
if(transtext == lang1){ // escolha do idioma == idioma 1
tabelatitle.innerHTML = tabletitle1; // traduzir o <h1> para idioma escolhido
document.getElementById("botao").innerHTML = buttonvalue1; // traduzir o botao para o idioma escolhido
if(document.getElementById("segunda").innerHTML = parametroadequadoaoidiomaemquestao;
if(document.getElementById("terca").innerHTML = parametroadequadoaoidiomaemquestao;
etc..... (todas as palavras, incluindo, dias da semana, tempo do mar, tarde noite etc
else if(transtext == lang1){ // escolha do idioma == idioma 1
tabelatitle.innerHTML = tabletitle1; // traduzir o <h1> para idioma escolhido
document.getElementById("botao").innerHTML = buttonvalue1; // traduzir o botao para o idioma escolhido
if(document.getElementById("segunda").innerHTML = parametroadequadoaoidiomaemquestao;
if(document.getElementById("terca").innerHTML = parametroadequadoaoidiomaemquestao;
etc..... (todas as palavras, incluindo, dias da semana, tempo do mar, tarde noite etc
Tentei usar GetElementByTagsName
para condicionar todas as palavras da tabela em <th>
a respeitar condição de mudar innerHTML
sem precisar atribuir id a cada, mas não funcionou.
Teria como fazer isso usando loops ou outra coisa?