0

Criei recentemente uma aplicação JavaScript que funciona perfeitamente no navegador Chrome e ontem eu resolvi testá-la no Internet Explorer.

Para a minha surpresa, a página não estava do jeito que deveria estar e além disso, ao abrir o console do navegador eu me deparei com essa pilha de erros:

SCRIPT1004: ';' esperado
Arquivo: main.js Linha: 74 Coluna: 20
SCRIPT1006: ')' esperado
Arquivo: progressBar.js Linha: 12 Coluna: 45
SCRIPT1006: ')' esperado
Arquivo: stopwatch.js Linha: 30 Coluna: 47
SCRIPT5009: 'createTriangle' não está definido
Arquivo: index.html Linha: 34 Coluna: 13

Na aba depurador ele mostra o seguinte erro:

'createTriangle' não está definido

Abaixo está um pedaço do meu código (o meu código inteiro está aqui no GitHub) que é a parte onde o navegador aponta o erro:

function createTriangle(element){

    var triangle = document.createElement("div");
    triangle.setAttribute("class","triangle-right");
    element.appendChild(triangle);

    triangle.style.left = element.offsetWidth / 2 - triangle.offsetWidth / 2 + "px";
    triangle.style.top = element.offsetHeight / 2 - triangle.offsetHeight / 2 + "px";
}

function removeAllChild(element){

    for (let child of element.children){
        element.removeChild(child);
    }
}
<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>Stopwatch</title>
        <link rel="stylesheet" type="text/css" href="./css/style.css">
        <script type="text/javascript" src="./js/main.js"></script>
    </head>

    <body>
        <div style="position: absolute; top: 70%;">
            <button align="center" id="button"></button>
        <div>

        <script>
            var button = document.getElementById("button");
            createTriangle(button);
        </script>
    </body>
</html>

Eu revisei o código diversas vezes e tenho certeza que de não falta ponto e vírgula ou parênteses em qualquer lugar do código. Então o que pode estar gerando este erro ?

1 Resposta 1

4

O for..of não é suportado pelo IE, me refiro a isto:

for (let child of element.children){

O let é suportado parcialmente pelo IE11, ajuste para:

for (var i = element.children.length - 1; i >= 0; i--) {
    element.removeChild(element.children[i]);
}

O loop tem que ser de trás para frente pois cada vez que um elemento é removido o index é "reajustado"

Aproveite e isole o que é operação matematica do que é "concatenação" isolando com (...)

triangle.style.left = (element.offsetWidth / 2 - triangle.offsetWidth / 2) + "px";
triangle.style.top = (element.offsetHeight / 2 - triangle.offsetHeight / 2) + "px";

É bom tomar cuidado com operações matematicas também e isolar, porque assim você não irá se atrapalhar com os operadores que tem "prioridade"

1
  • Obrigado pela explicação e pela dica! Commented 19/01/2020 às 0:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .