function returning Undefined

Asked

Viewed 36 times

0

I am trying to insert strokes that will be according to the number of characters of the variable Athlete’s name, and the whole textSaida are inside a tag <pre>, however only the name and category appear on my page, tracos appears as 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>
javascript

  • You’re not wearing it tracos in that for... where this content should appear?

  • the variable is set just below the for var tracos;

  • Yes but this function has no Return, so it returns nothing...

1 answer

1

Good afternoon, Ane Mendes!

So I made some changes to the code to make it work!!

I’ll explain. 1 - Always declare variable outside repeat loops. 2 - always initialize the variables that will be incremented. This is what I did with the variables' letter' and tracus! 3 - Simplify the conditional, the experience helps in this part. The simpler the better.

4 - The.innerHTML output has to be after the declaration and processing of the 'tracos' variable'.

I’m going to put two codes for the same problem so you can study that code and evolve. One with the changes I mentioned above another for you to research and study! I recommend you a read on 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>

Code for study!

<!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>

I hope I’ve helped!

  • 1

    Thank you!!! I hadn’t noticed!!

Browser other questions tagged javascript

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