Calculation of Media with Javascript in Atom

Question

Calculation of Media with Javascript in Atom

Asked 6 years, 4 months ago

Viewed 575 times

-1

Good afternoon staff I have an exercise where I should calculate the average of the students, that the calculation should be done automatically, for that there is a table with 5 students,and each of them has two grades,the notes are already fixed in the table...what I need is that when my web page is associated with Javascript,the page when opening the averages already appear in the table.

How should I do this using Javascript.. using only the program Atom? That is to say I’ll just use the text editor!

Below is the image of the website.. And there on the averages that are zeroed I need to present the average values of each student - this when I associate the web page to the js file

I know that in the java file I must create a variable that selects the middle class and then I must do the calculations.. and that’s where this my difficulty do not know how to do it

JS code I thought for the averages and then my HTML code

var info-media = document.querySelector(".info-media")

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
		<title>Suas Notas Notaveis</title>
		<link rel="icon" href="icone.ico" type="image/x-icon">


</head>
<body>
<header>
<div class="container">
  <h1 class="titulo">Notas Notáveis</h1>
			</div>

</header>
<main>
<section class="container">
  <p class="paragrafo1">Bem Vindo Aluno(a)</p>
  <p class="paragrafo2">Esse Site Apresenta Sua Notas</p>
  <p class="paragrafo3">Suas Notas somadas irão resultar na sua média! </p>
  <p class="paragrafo4">Confira Suas Notas Abaixo:</p>

  <h2 class="firsth2"> Podemos calcular sua média?</h2>


  <h2 class="secondh2">Minhas Notas</h2>
				<table border="1">
					<thead>
						<tr>
							<th>Nome</th>
							<th>Nota1</th>
							<th>Nota2</th>
							<th>Média</th>
						</tr>
					</thead>

          <tbody id="notas">
           <tr class="aluno" id="primeiro-aluno" >
             <td class="info-nome">Ana</td>
             <td class="info-nota1">7.0</td>
             <td class="info-nota2">8.00</td>
             <td class="info-media">0</td>
           </tr>

           <tr class="aluno" id="segundo-aluno" >
             <td class="info-nome">Caio</td>
             <td class="info-nota1">4.5</td>
             <td class="info-nota2">5.5</td>
             <td class="info-media">0</td>
           </tr>

           <tr class="aluno" id="terceiro-aluno" >
             <td class="info-nome">Daniela</td>
             <td class="info-nota1">6.6</td>
             <td class="info-nota2">6.0</td>
             <td class="info-media">0</td>
           </tr>

           <tr class="aluno" id="quarto-aluno" >
             <td class="info-nome">Laura</td>
             <td class="info-nota1">3.2</td>
             <td class="info-nota2">2.00</td>
             <td class="info-media">0</td>
           </tr>

           <tr class="aluno" id="quinto-aluno" >
             <td class="info-nome">Marcos</td>
             <td class="info-nota1">9.0</td>
             <td class="info-nota2">9.5</td>
             <td class="info-media">0</td>
           </tr>

        </table>
    </section>


</main>
     
</body>
</html>

1 answer

Browser other questions tagged javascript text-editor atom

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

by Marcel • **586** points · Answer 1 · 2018-08-05T23:30:29+00:00

You can use any text editor, but you must save the file with the . html extension

You can insert the following script at the end of your code

<script type="text/javascript">
    //Pega todas as linhas com as notas dos alunos
    var alunos = document.querySelectorAll('.aluno');

    //Para cada linha pega a nota1 e nota 2, calcula a media e insere no campo info-media
    alunos.forEach(function(aluno){
      var nota1 = aluno.querySelector('.info-nota1').textContent;
      var nota2 = aluno.querySelector('.info-nota2').textContent;
      var media = (parseFloat(nota1) + parseFloat(nota2)) / 2;

      aluno.querySelector('.info-media').textContent = media;
    });
  </script>

Complete it will be like this:

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
		<title>Suas Notas Notaveis</title>
		<link rel="icon" href="icone.ico" type="image/x-icon">
</head>

<body>
  <header>
    <div class="container">
      <h1 class="titulo">Notas Notáveis</h1>
    </div>
  </header>
  <main>
    <section class="container">
      <p class="paragrafo1">Bem Vindo Aluno(a)</p>
      <p class="paragrafo2">Esse Site Apresenta Sua Notas</p>
      <p class="paragrafo3">Suas Notas somadas irão resultar na sua média! </p>
      <p class="paragrafo4">Confira Suas Notas Abaixo:</p>

      <h2 class="firsth2"> Podemos calcular sua média?</h2>


      <h2 class="secondh2">Minhas Notas</h2>
			<table border="1">
				<thead>
					<tr>
						<th>Nome</th>
						<th>Nota1</th>
						<th>Nota2</th>
						<th>Média</th>
					</tr>
				 </thead>

        <tbody id="notas">
         <tr class="aluno" id="primeiro-aluno" >
           <td class="info-nome">Ana</td>
           <td class="info-nota1">7.0</td>
           <td class="info-nota2">8.00</td>
           <td class="info-media">0</td>
         </tr>

         <tr class="aluno" id="segundo-aluno" >
           <td class="info-nome">Caio</td>
           <td class="info-nota1">4.5</td>
           <td class="info-nota2">5.5</td>
           <td class="info-media">0</td>
         </tr>

         <tr class="aluno" id="terceiro-aluno" >
           <td class="info-nome">Daniela</td>
           <td class="info-nota1">6.6</td>
           <td class="info-nota2">6.0</td>
           <td class="info-media">0</td>
         </tr>

         <tr class="aluno" id="quarto-aluno" >
           <td class="info-nome">Laura</td>
           <td class="info-nota1">3.2</td>
           <td class="info-nota2">2.00</td>
           <td class="info-media">0</td>
         </tr>

         <tr class="aluno" id="quinto-aluno" >
           <td class="info-nome">Marcos</td>
           <td class="info-nota1">9.0</td>
           <td class="info-nota2">9.5</td>
           <td class="info-media">0</td>
         </tr>
        </tbody>
      </table>
    </section>
  </main> 

  <script type="text/javascript">
    //Pega todas as linhas com as notas dos alunos
    var alunos = document.querySelectorAll('.aluno');

    //Para cada linha pega a nota1 e nota 2, calcula a media e insere no campo info-media
    alunos.forEach(function(aluno){
      var nota1 = aluno.querySelector('.info-nota1').textContent;
      var nota2 = aluno.querySelector('.info-nota2').textContent;
      var media = (parseFloat(nota1) + parseFloat(nota2)) / 2;

      aluno.querySelector('.info-media').textContent = media;
    });
  </script>    
</body>
</html>