Insert average variable (arrays)

Asked

Viewed 40 times

-1

I need to insert the average of the two notes in the fourth column, as in the print below. Could someone help me?

inserir a descrição da imagem aqui

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo 13 - Listagem de Idades</title>

    <style type="text/css">

    </style>

</head>
<h1>Listagem de Notas</h1>
<body>
    <p><label>Digite seu nome:</label><input type="text" id="inNome" size="20"></p>
    <p><label>Digite a nota 1:</label><input type="number" id="nota1"></p>
    <p><label>Digite a nota 2:</label><input type="number" id="nota2"></p>
    <p><input type="button" value="adicionar" onclick="adicionar()">
    <input type="button" value="media" onclick="media()"></p>
    <pre id="resultado"> </pre>

</body>

<script>
    var nomes = []; 
    var notas1 = new Array();
    var notas2 = new Array();
    var media = new Array ();
    var result = document.getElementById("resultado");
    var txtnome = document.getElementById("inNome");
    var txtnota1 = document.getElementById("nota1");
    var txtnota2 = document.getElementById("nota2");
    var txtmedia = ????


    result.textContent = "\nNome\t\tnota1\t\tnota2\t\ttxtmedia";

    function adicionar(){
        nomes.push(txtnome.value);
        notas1.push(txtnota1.value);
        notas2.push(txtnota2.value);
        media.push(txtmedia.value);
        result.textContent += "\n" + txtnome.value + "\t\t" + txtnota1.value + "\t\t" + txtnota2.value + "\t\t" + txtmedia;
    }

</script>

</html>
javascript

  • already has the value in the variables, so just convert to number and calculate: var txtmedia =(Number(textnota1) + Number(txtnota2)) / 2; see that if the value is decimal and has comma need to convert before, if you enter a non-numerical value will also give error and so on, so validate the value before, but basically that’s what you need to do

  • ---- As the colleague explained above, you have to pay attention to DOM HTML>

1 answer

0

The method document.getElementById("") is used to catch a reference to any element in a document that has a unique identifier defined for its ID attribute.

This method is one of the most common methods in DOM HTML and is used almost every time you want to manipulate or obtain information on an element of the document.

The information you want to add up are the VALUES of the inputs or 

txtmedia = (txtnota1.value) + (txtnota2.value);

Only that those values, (apesar dos inputs serem do type number), in javascript are considered to be of the string type and therefore there will not be a sum but a concatenation.

Note the example below.

    var result = document.getElementById("resultado");
    var txtnota1 = document.getElementById("nota1");
    var txtnota2 = document.getElementById("nota2");

    
 function testar(){

        console.log(typeof (txtnota1.value));
        console.log(typeof (txtnota2.value));
        
        txtmedia = ((txtnota1.value) + (txtnota2.value));
        
        result.textContent =  "Resultado = " + txtmedia;


    }
    <p><label>Digite a nota 1:</label><input type="number" id="nota1"></p>
    <p><label>Digite a nota 2:</label><input type="number" id="nota2"></p>
    <p><input type="button" value="adicionar" onclick="testar()">
    
    <pre id="resultado"> </pre>

So we have to turn them into Number type to perform the arithmetic operation.

txtmedia = (Number(txtnota1.value) + Number(txtnota2.value))/2

See the example below

    var result = document.getElementById("resultado");
    var txtnota1 = document.getElementById("nota1");
    var txtnota2 = document.getElementById("nota2");

    
 function testar(){

        console.log(typeof Number(txtnota1.value));
        console.log(typeof Number(txtnota2.value));
        
        txtmedia = (Number(txtnota1.value) + Number(txtnota2.value));
        
        result.textContent =  "Resultado = " + txtmedia;


    }
    <p><label>Digite a nota 1:</label><input type="number" id="nota1"></p>
    <p><label>Digite a nota 2:</label><input type="number" id="nota2"></p>
    <p><input type="button" value="adicionar" onclick="testar()">
    
    <pre id="resultado"> </pre>

OBS: the arithmetic operation (the calculation of the mean) must occur within the function adicionar() to make it work properly.

   
    var nomes = []; 
    var notas1 = new Array();
    var notas2 = new Array();
    var media = new Array ();
    var result = document.getElementById("resultado");
    var txtnome = document.getElementById("inNome");
    var txtnota1 = document.getElementById("nota1");
    var txtnota2 = document.getElementById("nota2");

    result.textContent = "\nNome\t\tnota1\t\tnota2\t\ttxtmedia";
    
 function adicionar(){
        nomes.push(txtnome.value);
        notas1.push(txtnota1.value);
        notas2.push(txtnota2.value);
        
        txtmedia = (Number(txtnota1.value) + Number(txtnota2.value))/2;
        
        media.push(txtmedia);
        result.textContent += "\n" + txtnome.value + "\t\t" + txtnota1.value + "\t\t" + txtnota2.value + "\t\t" + txtmedia;
    }
    <p><label>Digite seu nome:</label><input type="text" id="inNome" size="20"></p>
    <p><label>Digite a nota 1:</label><input type="number" id="nota1"></p>
    <p><label>Digite a nota 2:</label><input type="number" id="nota2"></p>
    <p><input type="button" value="adicionar" onclick="adicionar()">
    <input type="button" value="media" onclick="media()"></p>
    <pre id="resultado"> </pre>

Browser other questions tagged javascript

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