Put accent in javascript code

Question

Put accent in javascript code

Asked 7 years, 4 months ago

Viewed 94 times

0

I am doing a pedagogical job of completing words, but some words have accents and even if I put in the code appears that it is wrong, I wanted to know how to put the word in the code with accent and at the time of the test when putting with accent would be right.

function AbreJanela(ender) {
  var novajanela;
  novajanela = window.open(ender, 'janelinha', 'top=00, left=5, toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,menubar=no,width=60,height=350');
  novajanela.focus();
}
/**	
            - verifica se a letra confere com o resultado esperado
        	- envia mensagem se nao confere. 
        */
function Vetor(n) {
  this.length = n;
  for (var i = 1; i <= n; i++)
    this[i] = 0;
  return this
}


// carregando as letras
// no vetor a

a = new Vetor(75);
a[1] = "coelho";
a[2] = "xicara";
a[3] = "batata";
a[4] = "pato";
a[5] = "papai";
a[6] = "mamae";
a[7] = "caderno";
a[8] = "escola";
a[9] = "caneta";
a[10] = "remedio";
a[11] = "computador";
a[12] = "recreio";
a[13] = "vaso";
a[14] = "flor";
a[15] = "cadeira";
a[16] = "mesa";
a[17] = "documento";
a[18] = "carro";

function verifica(campo, letra) {
  l = campo.valueOf(); // transforma em numero o nome do campo p/ usar como indice no vetor a
  if (letra == "")
  //window.alert ("teste 1")
  {
    Return = false
  } else if (letra.toUpperCase() != a[l].toUpperCase())
    window.alert("" + letra + "? Ta errado, apague e escreva novamente.");

  //if (letra.toUpperCase() != a[l].toUpperCase())

  //window.alert(""+letra+" -> Você cometeu um erro, apague e escreva novamente.");


}

body {
  background: #000000;
  color: #65B200;
}

a {
  color: #4466ff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

input {
  background: #000000;
  border: 2px solid #333333;
}

<div id="conteudo">
  <div align="center">
    <center>
      <table border="0" cellpadding="0" width="360" bgcolor="#222222" height="693">
        <tr>
          <td width="165" align="left" height="22" bgcolor="#222222">
            <p style="margin-left: 12" align="left"><b><font face="Arial" size="3">1-
                  CHLOEO</font></b></p>
          </td>
          <td width="165" align="left" height="22" bgcolor="#222222">
            <p style="margin-left: 12" align="left"><b><font face="Arial" size="3">2-
                  XAR&Iacute;CA</font></b></p>
          </td>
        </tr>
        <tr>
          <td width="165" align="left" height="24" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font face="Arial" size="2">
                <!--webbot
                  bot="Validation" S-Data-Type="String" B-Allow-Letters="TRUE"
                  B-Value-Required="TRUE" I-Maximum-Length="25" --><input style="font-size: 10 pt; width: 147; font-family: Arial; height: 22; text-align: center; text-transform: uppercase; color: #dddddd; font-weight: bold" onchange="verifica(this.name, this.value)" size="1" name="1" maxlength="25"></font>
            </p>
          </td>
          <td width="165" align="left" height="24" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font face="Arial" size="2">
                <!--webbot
                  bot="Validation" S-Data-Type="String" B-Allow-Letters="TRUE"
                  B-Value-Required="TRUE" I-Maximum-Length="25" --><input style="font-size: 10 pt; width: 147; font-family: Arial; height: 22; text-align: center; text-transform: uppercase; color: #dddddd; font-weight: bold" onchange="verifica(this.name, this.value)" size="1" name="2" maxlength="25"></font>
            </p>
          </td>
        </tr>
        <tr>
          <td width="165" align="left" height="18" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font size="2" face="Arial" color="#222222">.</font>
            </p>
          </td>
          <td width="165" align="left" height="18" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font size="2" face="Arial" color="#222222">.</font>
            </p>
          </td>
        </tr>
        <tr>
          <td width="165" align="left" height="21" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font size="3" face="Arial"><b>3-
                  BTAATA</b></font>
            </p>
          </td>
          <td width="165" align="left" height="21" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font size="3" face="Arial"><b>4-
                  TPOA</b></font>
            </p>
          </td>
        </tr>
        <tr>
          <td width="165" align="left" height="24" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font face="Arial" size="2">
                <!--webbot
                  bot="Validation" S-Data-Type="String" B-Allow-Letters="TRUE"
                  B-Value-Required="TRUE" I-Maximum-Length="25" --><input style="font-size: 10 pt; width: 147; font-family: Arial; height: 22; text-align: center; text-transform: uppercase; color: #dddddd; font-weight: bold" onchange="verifica(this.name, this.value)" size="1" name="3" maxlength="25"></font>
            </p>
          </td>
          <td width="165" align="left" height="24" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font face="Arial" size="2">
                <!--webbot
                  bot="Validation" S-Data-Type="String" B-Allow-Letters="TRUE"
                  B-Value-Required="TRUE" I-Maximum-Length="25" --><input style="font-size: 10 pt; width: 147; font-family: Arial; height: 22; text-align: center; text-transform: uppercase; color: #dddddd; font-weight: bold" onchange="verifica(this.name, this.value)" size="1" name="4" maxlength="25"></font>
            </p>
          </td>
        </tr>
        <tr>
          <td width="165" align="left" height="18" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font size="2" face="Arial" color="#222222">.</font>
            </p>
          </td>
          <td width="165" align="left" height="18" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font size="2" face="Arial" color="#222222">.</font>
            </p>
          </td>
        </tr>
        <tr>
          <td width="165" align="left" height="21" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font size="3" face="Arial"><b>5-
                  PPAAI</b></font>
            </p>
          </td>
          <td width="165" align="left" height="21" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font size="3" face="Arial"><b>6-
                  MEAM&Atilde;</b></font>
            </p>
          </td>
        </tr>
        <tr>
          <td width="165" align="left" height="24" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font face="Arial" size="2">
                <!--webbot
                  bot="Validation" S-Data-Type="String" B-Allow-Letters="TRUE"
                  B-Value-Required="TRUE" I-Maximum-Length="25" --><input style="font-size: 10 pt; width: 147; font-family: Arial; height: 22; text-align: center; text-transform: uppercase; color: #dddddd; font-weight: bold" onchange="verifica(this.name, this.value)" size="1" name="5" maxlength="25"></font>
            </p>
          </td>
          <td width="165" align="left" height="24" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font face="Arial" size="2">
                <!--webbot
                  bot="Validation" S-Data-Type="String" B-Allow-Letters="TRUE"
                  B-Value-Required="TRUE" I-Maximum-Length="25" --><input style="font-size: 10 pt; width: 147; font-family: Arial; height: 22; text-align: center; text-transform: uppercase; color: #dddddd; font-weight: bold" onchange="verifica(this.name, this.value)" size="1" name="6" maxlength="25"></font>
            </p>
          </td>
        </tr>
        <tr>
          <td width="165" align="left" height="18" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font size="2" face="Arial" color="#222222">.</font>
            </p>
          </td>
          <td width="165" align="left" height="18" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font size="2" face="Arial" color="#222222">.</font>
            </p>
          </td>
        </tr>
        <tr>
          <td width="164" align="left" valign="middle" height="21" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font size="3" face="Arial"><b>7-
                  CNOADER</b></font>
            </p>
          </td>
          <td width="163" align="left" valign="middle" height="21" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font size="3" face="Arial"><b>8-
                  ELASCO</b></font>
            </p>
          </td>
        </tr>
        <tr>
          <td width="164" align="left" valign="middle" height="24" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font face="Arial" size="2">
                <!--webbot
                  bot="Validation" S-Data-Type="String" B-Allow-Letters="TRUE"
                  B-Value-Required="TRUE" I-Maximum-Length="25" --><input style="font-size: 10 pt; width: 147; font-family: Arial; height: 22; text-align: center; text-transform: uppercase; color: #dddddd; font-weight: bold" onchange="verifica(this.name, this.value)" size="1" name="7" maxlength="25"></font>
            </p>
          </td>
          <td width="163" align="left" valign="middle" height="24" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font face="Arial" size="2">
                <!--webbot
                  bot="Validation" S-Data-Type="String" B-Allow-Letters="TRUE"
                  B-Value-Required="TRUE" I-Maximum-Length="25" --><input style="font-size: 10 pt; width: 147; font-family: Arial; height: 22; text-align: center; text-transform: uppercase; color: #dddddd; font-weight: bold" onchange="verifica(this.name, this.value)" size="1" name="8" maxlength="25"></font>
            </p>
          </td>
        </tr>
        <tr>
          <td width="164" align="left" valign="middle" height="18" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font face="Arial" size="2" color="#222222">.</font>
            </p>
          </td>
          <td width="163" align="left" valign="middle" height="18" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font face="Arial" size="2" color="#222222">.</font>
            </p>
          </td>
        </tr>
        <tr>
          <td width="164" align="left" valign="middle" height="21" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font size="3" face="Arial"><b>9-
                  CATANE</b></font>
            </p>
          </td>
          <td width="163" align="left" valign="middle" height="21" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font size="3" face="Arial"><b>10-
                  RDIOEM&Eacute;</b></font>
            </p>
          </td>
        </tr>
        <tr>
          <td width="164" align="left" valign="middle" height="24" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font face="Arial" size="2">
                <!--webbot
                  bot="Validation" S-Data-Type="String" B-Allow-Letters="TRUE"
                  B-Value-Required="TRUE" I-Maximum-Length="25" --><input style="font-size: 10 pt; width: 147; font-family: Arial; height: 22; text-align: center; text-transform: uppercase; color: #dddddd; font-weight: bold" onchange="verifica(this.name, this.value)" size="1" name="9" maxlength="25"></font>
            </p>
          </td>
          <td width="163" align="left" valign="middle" height="24" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font face="Arial" size="2">
                <!--webbot
                  bot="Validation" S-Data-Type="String" B-Allow-Letters="TRUE"
                  B-Value-Required="TRUE" I-Maximum-Length="25" --><input style="font-size: 10 pt; width: 147; font-family: Arial; height: 22; text-align: center; text-transform: uppercase; color: #dddddd; font-weight: bold" onchange="verifica(this.name, this.value)" size="1" name="10" maxlength="25"></font>
            </p>
          </td>
        </tr>
        <tr>
          <td width="164" align="left" valign="middle" height="18" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font size="2" face="Arial" color="#222222">.</font>
            </p>
          </td>
          <td width="163" align="left" valign="middle" height="18" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font size="2" face="Arial" color="#222222">.</font>
            </p>
          </td>
        </tr>
        <tr>
          <td width="164" align="left" valign="middle" height="21" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font size="3" face="Arial"><b>11-
                  CODORMPUTA</b></font>
            </p>
          </td>
          <td width="163" align="left" valign="middle" height="21" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font size="3" face="Arial"><b>12-
                  RIOECRE</b></font>
            </p>
          </td>
        </tr>
        <tr>
          <td width="164" align="left" valign="middle" height="24" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font face="Arial" size="2">
                <!--webbot
                  bot="Validation" S-Data-Type="String" B-Allow-Letters="TRUE"
                  B-Value-Required="TRUE" I-Maximum-Length="25" --><input style="font-size: 10 pt; width: 147; font-family: Arial; height: 22; text-align: center; text-transform: uppercase; color: #dddddd; font-weight: bold" onchange="verifica(this.name, this.value)" size="1" name="11" maxlength="25"></font>
            </p>
          </td>
          <td width="163" align="left" valign="middle" height="24" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font face="Arial" size="2">
                <!--webbot
                  bot="Validation" S-Data-Type="String" B-Allow-Letters="TRUE"
                  B-Value-Required="TRUE" I-Maximum-Length="25" --><input style="font-size: 10 pt; width: 147; font-family: Arial; height: 22; text-align: center; text-transform: uppercase; color: #dddddd; font-weight: bold" onchange="verifica(this.name, this.value)" size="1" name="12" maxlength="25"></font>
            </p>
          </td>
        </tr>
        <tr>
          <td width="164" align="left" valign="middle" height="18" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font size="2" face="Arial" color="#222222">.</font>
            </p>
          </td>
          <td width="163" align="left" valign="middle" height="18" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font size="2" face="Arial" color="#222222">.</font>
            </p>
          </td>
        </tr>
        <tr>
          <td width="164" align="left" valign="middle" height="21" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font size="3" face="Arial"><b>13-
                  VSAO</b></font>
            </p>
          </td>
          <td width="163" align="left" valign="middle" height="21" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font size="3" face="Arial"><b>14-
                  FRLO</b></font>
            </p>
          </td>
        </tr>
        <tr>
          <td width="164" align="left" valign="middle" height="24" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font face="Arial" size="2">
                <!--webbot
                  bot="Validation" S-Data-Type="String" B-Allow-Letters="TRUE"
                  B-Value-Required="TRUE" I-Maximum-Length="25" --><input style="font-size: 10 pt; width: 147; font-family: Arial; height: 22; text-align: center; text-transform: uppercase; color: #dddddd; font-weight: bold" onchange="verifica(this.name, this.value)" size="1" name="13" maxlength="25"></font>
            </p>
          </td>
          <td width="163" align="left" valign="middle" height="24" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font face="Arial" size="2">
                <!--webbot
                  bot="Validation" S-Data-Type="String" B-Allow-Letters="TRUE"
                  B-Value-Required="TRUE" I-Maximum-Length="25" --><input style="font-size: 10 pt; width: 147; font-family: Arial; height: 22; text-align: center; text-transform: uppercase; color: #dddddd; font-weight: bold" onchange="verifica(this.name, this.value)" size="1" name="14" maxlength="25"></font>
            </p>
          </td>
        </tr>
        <tr>
          <td width="164" align="left" valign="middle" height="18" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font size="2" face="Arial" color="#222222">.</font>
            </p>
          </td>
          <td width="163" align="left" valign="middle" height="18" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font size="2" face="Arial" color="#222222">.</font>
            </p>
          </td>
        </tr>
        <tr>
          <td width="164" align="left" valign="middle" height="21" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font size="3" face="Arial"><b>15-
                  CRAADEI</b></font>
            </p>
          </td>
          <td width="163" align="left" valign="middle" height="21" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font size="3" face="Arial"><b>16-
                  MSEA</b></font>
            </p>
          </td>
        </tr>
        <tr>
          <td width="164" align="left" valign="middle" height="24" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font face="Arial" size="2">
                <!--webbot
                  bot="Validation" S-Data-Type="String" B-Allow-Letters="TRUE"
                  B-Value-Required="TRUE" I-Maximum-Length="25" --><input style="font-size: 10 pt; width: 147; font-family: Arial; height: 22; text-align: center; text-transform: uppercase; color: #dddddd; font-weight: bold" onchange="verifica(this.name, this.value)" size="1" name="15" maxlength="25"></font>
            </p>
          </td>
          <td width="163" align="left" valign="middle" height="24" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font face="Arial" size="2">
                <!--webbot
                  bot="Validation" S-Data-Type="String" B-Allow-Letters="TRUE"
                  B-Value-Required="TRUE" I-Maximum-Length="25" --><input style="font-size: 10 pt; width: 147; font-family: Arial; height: 22; text-align: center; text-transform: uppercase; color: #dddddd; font-weight: bold" onchange="verifica(this.name, this.value)" size="1" name="16" maxlength="25"></font>
            </p>
          </td>
        </tr>
        <tr>
          <td width="164" align="left" valign="middle" height="18" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font size="2" face="Arial" color="#222222">.</font>
            </p>
          </td>
          <td width="163" align="left" valign="middle" height="18" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font size="2" face="Arial" color="#222222">.</font>
            </p>
          </td>
        </tr>
        <tr>
          <td width="164" align="left" valign="middle" height="21" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font size="3" face="Arial"><b>17-
                  DENOCUMTO</b></font>
            </p>
          </td>
          <td width="163" align="left" valign="middle" height="21" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font size="3" face="Arial"><b>18-
                  CROAR</b></font>
            </p>
          </td>
        </tr>
        <tr>
          <td width="164" align="left" valign="middle" height="24" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font face="Arial" size="2">
                <!--webbot
                  bot="Validation" S-Data-Type="String" B-Allow-Letters="TRUE"
                  B-Value-Required="TRUE" I-Maximum-Length="25" --><input style="font-size: 10 pt; width: 147; font-family: Arial; height: 22; text-align: center; text-transform: uppercase; color: #dddddd; font-weight: bold" onchange="verifica(this.name, this.value)" size="1" name="17" maxlength="25"></font>
            </p>
          </td>
          <td width="163" align="left" valign="middle" height="24" bgcolor="#222222">
            <p style="margin-left: 12" align="left">
              <font face="Arial" size="2">
                <!--webbot
                  bot="Validation" S-Data-Type="String" B-Allow-Letters="TRUE"
                  B-Value-Required="TRUE" I-Maximum-Length="25" --><input style="font-size: 10 pt; width: 147; font-family: Arial; height: 22; text-align: center; text-transform: uppercase; color: #dddddd; font-weight: bold" onchange="verifica(this.name, this.value)" size="1" name="18" maxlength="25"></font>
            </p>
          </td>
        </tr>
        <tr>
          <td width="164" align="center" valign="middle" height="21" bgcolor="#222222">&nbsp;</td>
          <td width="163" align="center" valign="middle" height="21" bgcolor="#222222">&nbsp;</td>
        </tr>
    </center>
    <tr>
      <td width="327" align="center" valign="middle" height="21" colspan="2" bgcolor="#222222">
        <p style="margin-left: 0; margin-right: 0" align="left">
          <a href="javascript:AbreJanela('resposta_forme_palavras1.txt')">
            <font face="Arial" size="1">Respostas</font>
          </a>
        </p>
      </td>
    </tr>
    </table>
  </div>

I think I can understand, in the word mom for example only works if you put mamae without accent I would like to put mom, and if it is some code only in the letter that indicates me a table please

I don’t understand, if in vector you change a[6] = "mamae"; for a[6] = "mamãe";, works just right...

– MarceloBoni

2017/08/15 at 17:31
doesn’t work I’ve tried, at least it didn’t work with me, I use Firefox

– Lary

2017/08/15 at 17:34
Testing in firefox v55.0.1: https://i.stack.Imgur.com/Ital4.gif

– MarceloBoni

2017/08/15 at 17:38
how strange the version of mine is firefox 55.0b13 (32-bit) but I tested on Chrome and it worked although I do not like this browser I will have to use it for this, thanks for the help

– Lary

2017/08/15 at 17:43
It should work on firefox as well. I tested on both + opera and all worked

– MarceloBoni

2017/08/15 at 17:44
I wish I could, but I could use the same accent in another browser for me already well, I should have tested it in another browser too before asking here

– Lary

2017/08/15 at 17:46
It can be bad page coding, tested in firefox, here in stacksnippets I edited in your question, or on your page?

– MarceloBoni

2017/08/15 at 17:47
in firefox on the same page

– Lary

2017/08/15 at 17:52
alias here in the code that you put tbm not working

– Lary

2017/08/15 at 17:53
Clean up the browser cache

– Renato Junior

2017/08/15 at 21:12

Show 5 more comments

1 answer

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.

by Sam • **79,597** points · Answer 1 · 2017-08-15T18:45:52+00:00

Add the code below:

letrasAcentuadas = "ÁAÀAÃAÂAÉEÈEÊEÍIÌIÓOÒOÔOÕOÚUÙUÛU";

function eliminaAcentos(i){
    for(x=0;x<i.length;x++){
      if(letrasAcentuadas.indexOf(i.charAt(x)) != -1 && letrasAcentuadas.indexOf(i.charAt(x))%2 == 0){
      i = i.replace( i.charAt(x),letrasAcentuadas.substring(letrasAcentuadas.indexOf(i.charAt(x))+1,letrasAcentuadas.indexOf(i.charAt(x))+2) );
      }
    }
    return i;
}

and changes the line that checks to:

} else if (eliminaAcentos(letra.toUpperCase()) != a[l].toUpperCase()){

The function eliminaAcentos(i) will check if there are accented letters and replace with the corresponding letter without accent. Therefore, it does not matter if the person types a word with or without accents.

UPDATING

To further decrease the code, you can use Regexp in the function, thus:

function eliminaAcentos(i){
    i = i.toLowerCase()
    i = i.replace(new RegExp(/[àáâãäå]/g),"A");
    i = i.replace(new RegExp(/ç/g),"C");
    i = i.replace(new RegExp(/[èéêë]/g),"E");
    i = i.replace(new RegExp(/[ìíîï]/g),"I");
    i = i.replace(new RegExp(/[òóôõö]/g),"O");
    i = i.replace(new RegExp(/[ùúûü]/g),"U");

    return i.toUpperCase();
}

This way you can delete from the code the line letrasAcentuadas = "ÁAÀAÃAÂAÉEÈEÊEÍIÌIÓOÒOÔOÕOÚUÙUÛU";