Problem executing function with While loop and If condition

Asked

Viewed 46 times

-1

I need to perform an exercise, which prompts a system that reads 20 numbers, then sums them up and then displays the result on the screen. The statement asks to use only While. So I made the code below, but when I run the function (calculate), the system ignores the Cont variable and also does not show the somatorio. If anyone can help me, I’d be grateful.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Questão 7</title>
    <style>
        body{background-color: gray;
        }
        body h1{text-align: center;
            color: honeydew;
        }
        .corpo{width: 300px;
            height: 350px;
            margin: auto;
            padding-top: 10px;
            background-color: white;
            border-radius: 10px;
            }
        div{text-align: center;
            margin:auto;}
    </style>
</head>
<body>
    <h1>Questão 7</h1>
    <section class='corpo'>
        <div id='entrada'>
            <p>Digite 5 números:<br>
            <input type='number' name='num1' id='num1'>
            </p>
            <input type='button' value='Enviar' onclick='calcular()'>    
        </div>
        <div id='resultado' >
            Aguarde...            
        </div>
    </section>
    <script>
    function calcular(){
        n1=document.getElementById('num1')
        r=document.getElementById('resultado')
        fn1 = Number(n1.value)
        var cont = Number(1);
        var soma = Number(0);
        while (cont < 5){
            if (cont == 1){
                soma = fn1;
            }
            else{
                soma += fn1;
            }
            cont ++;
        }
        r.innerHTML=`A soma é: ${soma}.`
    }
    </script>
    </body>
    </html>

1 answer

1

I modified a little the structure of your code, I do not know if it will solve your problem, I used an array to record the numbers and when it is the last one performs the sum, as you said it should be done.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Questão 7</title>
    <style>
        body{background-color: gray;
        }
        body h1{text-align: center;
            color: honeydew;
        }
        .corpo{width: 300px;
            height: 350px;
            margin: auto;
            padding-top: 10px;
            background-color: white;
            border-radius: 10px;
            }
        div{text-align: center;
            margin:auto;}
    </style>
</head>
<body>
    <h1>Questão 7</h1>
    <section class='corpo'>
        <div id='entrada'>
            <p>Digite 5 números:<br>
            <input type='number' name='num1' id='num1'>
            </p>
            <input type='button' value='Enviar' onclick='calcular()'>    
        </div>
        <div id='resultado' >
            Aguarde...            
        </div>
    </section>
    <script>
    const numeros = [];
    function calcular(){
        n1 = document.getElementById('num1');
        r = document.getElementById('resultado');

        if(numeros.length < 5){
            numeros[numeros.length] = n1.value;
            n1.value = "";
            n1.focus();
        }

        if(numeros.length == 5){
            let contador = 0;
            let soma = 0;
            while(contador < 5){
                soma += parseInt(numeros[contador]);
                contador++;
            }
            r.innerHTML= `A soma é: ${soma}.`;
        }       
    }
    </script>
    </body>
    </html>

  • Gustavo thanks for the support, helped a lot

Browser other questions tagged

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