0

Estou tentado inserir traços que serao de acordo com a quantidade de caracteres da variavel nomeAtleta, e todo o textoSaida estao dentro de uma tag <pre>, porem apenas o nomeAtleta e categoria aparecem na minha pagina, o tracos aparece como undefined.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Clube de Natacao</title>

</head>
<img src="natacao.jpeg" alt="crianca na piscina">
<h2> Clube de Natacao </h2>

<body>
    <p> Nome <input typet="text" id="txtnome" autofocus> </p>
    <p> Idade <input type="text" id="txtidade"></p>
    <input type="button" id="formBt" value="Categorizar Atleta" onclick="gerarTracos()">
    <h3>
        <pre id="saida"> </pre>
    </h3>
    <script>
        function gerarTracos() {
            var saida = document.getElementById("saida");
            var nomeAtleta = document.getElementById("txtnome").value;
            var nomeAtleta = nomeAtleta.toUpperCase();
            var idadeAtleta = document.getElementById("txtidade").value;
            var i; 

            var textoSaida = nomeAtleta + "<br>" + tracos + "<br>";
            textoSaida += "Categoria: " + categoria(idadeAtleta);


            var comprimento = nomeAtleta.length;
            saida.innerHTML =  textoSaida;

            for (i = 0; i < comprimento; i++) {
                var letra = nomeAtleta.charAt(i);
                var tracos; 
                if (letra != "A" || letra == "B" || letra == "C" || letra == "D" || letra == "E" || letra == "F" || letra == "G" || letra == "H" || letra == "I" || letra == "J" || letra == "K" || letra == "L" || letra == "M" || letra == "N" || letra == "O" || letra == "P" || letra == "Q" || letra == "R" || letra == "S" || letra == "T" || letra == "U" || letra == "V" || letra == "X" || letra == "W" || letra == "Y" || letra == "Z") {
                    tracos += "-";
                }
                else {
                    tracos += " ";
                }
            }
        }
        function categoria(idadeAtleta) {

            if (idadeAtleta <= 12) {
                return "Infantil";
            }
            else if (idadeAtleta > 12 && idadeAtleta < 18) {
                return "Juvenil";
            }
            else if (idadeAtleta > 18) {
                return "Adulto";
            }
        }
    </script>
</body>

</html>
3
  • Não estás a usar tracos nesse for... onde deveria aparecer esse conteúdo?
    – Sergio
    31/05/2020 às 18:49
  • a variavel está definida logo abaixo do for var tracos;
    – Ane Mendes
    31/05/2020 às 19:03
  • Sim mas essa função não tem return, por isso não retorna nada...
    – Sergio
    31/05/2020 às 19:08

1 Resposta 1

1

Boa tarde, Ane Mendes!

Então fiz algumas alteração no código pra fazer funcionar!!

Vou explicar. 1 - Sempre declare variável fora de laços de repetição. 2 - inicialize sempre as variáveis que forem serem incrementadas. Foi o que eu fiz com as variáveis 'letra' e 'tracos'! 3 - Simplificar a condicional, a experiencia ajuda nesta parte. Quanto mais simples melhor.

4 - A saida.innerHTML tem que ficar apos a declaração e processamento da variável 'tracos'.

Vou colocar dois códigos para o mesmo problema, pra você conseguir estudar esse código e evoluir. Um com as mudanças que citei acima outra pra você pesquisar e estudar! Recomendo que você de uma lida em https://www.alura.com.br/artigos/entenda-diferenca-entre-var-let-e-const-no-javascript

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Clube de Natacao</title>

</head>
<img src="natacao.jpeg" alt="crianca na piscina">
<h2> Clube de Natacao </h2>

<body>
    <p> Nome <input typet="text" id="txtnome" autofocus> </p>
    <p> Idade <input type="text" id="txtidade"></p>
    <input type="button" id="formBt" value="Categorizar Atleta" onclick="gerarTracos()">
    <h3>
        <pre id="saida"> </pre>
    </h3>
    <script>
        function gerarTracos() {
            var saida = document.getElementById("saida");
            var nomeAtleta = document.getElementById("txtnome").value.toUpperCase();
            var idadeAtleta = document.getElementById("txtidade").value;
            var i; 

            var letra = ""
            var tracos = ""; 
            for (i = 0; i < nomeAtleta.length; i++) {
                letra = nomeAtleta.charAt(i);
                if(letra == " ") tracos += ' '
                else tracos += "-";
            }

            var textoSaida = nomeAtleta + "<br>" + tracos + "<br>";
            textoSaida += "Categoria: " + categoria(idadeAtleta);
            saida.innerHTML =  textoSaida;

        }

        function categoria(idadeAtleta) {

            if (idadeAtleta <= 12) {
                return "Infantil";
            }
            else if (idadeAtleta > 12 && idadeAtleta < 18) {
                return "Juvenil";
            }
            else if (idadeAtleta > 18) {
                return "Adulto";
            }
        }
    </script>
</body>

</html>

Código para estudo!

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Clube de Natacao</title>

    </head>
    <img src="natacao.jpeg" alt="crianca na piscina">
    <h2> Clube de Natacao </h2>

    <body>
        <p> Nome <input typet="text" id="txtnome" autofocus> </p>
        <p> Idade <input type="text" id="txtidade"></p>
        <input type="button" id="formBt" value="Categorizar Atleta" onclick="gerarTracos()">
        <h3><pre id="saida"> </pre></h3>

        <script>
            const categoria = () => {
                let idadeAtleta = document.getElementById("txtidade").value;
                if (idadeAtleta <= 12) return "Infantil";
                else if (idadeAtleta > 12 && idadeAtleta < 18) return "Juvenil";
                return "Adulto";
            }

            function gerarTracos() {
                let nomeAtleta = document.getElementById("txtnome").value.toUpperCase();
                let tracos = ""; 
                for(let letra of nomeAtleta){
                    if(letra == " ") tracos += ' ';
                    else tracos += "-";   
                }
                document.getElementById("saida").innerHTML = `
                    ${nomeAtleta}
                    <br>
                    ${tracos}
                    <br>
                    Categoria: ${categoria()}
                `;
            }
        </script>
    </body>
</html>

Espero ter ajudado!

1
  • 1
    Obrigado!!! Não tinha observado!! 31/05/2020 às 20:36

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