Media Calculation with JavaScript on Atom

Question

Media Calculation with JavaScript on Atom

Navigation

#1 by (1 votes)

-2

Good morning, I have an exercise where I have to calculate the means of the students, that the calculation must be done automatically, for this there is a table with 5 students, and each of them has two notes, which must be added together and from of them I must inform the average, the notes are already fixed in the table ... what I need is that when my web page is associated with Javascript, the page when the averages are already displayed appear in the table.

How do I do this using JavaScript ... just by using the Atom program? In other words, I will just use the text editor!

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

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

JS code I thought for the averages and then my HTML

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>

javascript atom

asked by anonymous 05.08.2018 / 22:39

1 answer

Problems receiving money as input in edittext How to change a specific word in one TXT by another

score 1 · Accepted Answer

You can use any text editor, however you should save the file with the extension .html

You can enter 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>

Full it will look 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>