JSFiddle - React, Tailwind, and code Playground

HTML

<div class="">
  <p>Media dos alunos</p>

  <form class="" method="post">
    <label>Aluno 01</label>
    <input type="number" id="nota01" value="" max="10">
    <br>
    <br>
    <label>Aluno 02</label>
    <input type="number" id="nota02" value="" max="10">
    <br>
    <br>
    <label>Aluno 03</label>
    <input type="number" id="nota03" value="" max="10">
    <br>
    <br>
    <label>Aluno 04</label>
    <input type="number" id="nota04" value="" max="10">
    <br>
    <br>
    <input type="button" onclick="javascript:calculo();" name="name" value="Enviar">
    <input type="text" name="txtMedia" value="">
  </form>
</div>

JavaScript

function calculo() {
  var inputs = [].filter.call(document.querySelectorAll('form input[id]'), function(input) {
    return input.id.indexOf('nota0') == 0;
  });
  var media = inputs.reduce(function(soma, input) {
    return soma + parseFloat(input.value || 0);
  }, 0) / inputs.length;
  document.querySelector('input[name="txtMedia"]').value = media;
}