0

Llevo un par de horas intentando resolver esto sin resultado alguno.

Mi objetivo es calcular la media de 3 números obtenidos de un "form" insertadas mediante "inputs" y enviar este resultado a un "td". Pero no consigo que se envíe el resultado.

Tabla del HTML


    <div id="tabla">
        <table id="list" cellspacing="3" cellpadding="3" border="1">
            <thead>
                <tr>
                    <td>Nombre</td>
                    <td>Apellidos</td>
                    <td>Sexo</td>
                    <td>Nota 1</td>
                    <td> Nota 2</td>
                    <td>Nota 3</td>
                    <td id="display">Nota Media</td>
                    <td>Eliminar</td>

                </tr>

            </thead>
            <tbody></tbody>

        </table>
    </div>

Button

      <p>
<button type="button" onclick="apply()" class="media" id="median"> Añadir</button>
 </p>

JS

    function Promedio() {
        var not1 = document.getElementById('not1').value;
        var not2 = document.getElementById('not2').value;
        var not3 = document.getElementById('not3').value;
        var display = document.getElementsByTagName('td')[7];innerHTML;
     var cal = (parseFloat(not1) + parseFloat(not2) + parseFloat(not3)) / 3;
        display.innerHTML = cal;
        

    }

    function TablaData() {

        var rows = "";
        var nombre = document.getElementById("nombre").value;
        var apellidos = document.getElementById("apellidos").value;
        var Sexo = document.querySelector('input[name="Sexo"]:checked').value;
        var not1 = document.getElementById("not1").value;
        var not2 = document.getElementById("not2").value;
        var not3 = document.getElementById("not3").value;
        var display = document.getElementsByTagName("td")[6].innerHTML;
        rows += "<tr><td>" + nombre + "</td><td>" + apellidos + "</td><td>" + Sexo + "</td><td>" + not1 + "</td><td>" + not2 + "</td><td>" + not3 + "</td><td>" + display + "</td></tr>";
        $(rows).appendTo("#list tbody");

    }

    function apply() {
        TablaData();
        Promedio();
        
    }
</script>

 

Solo conisgo que en el td aparezca el texto : Nota Media o HTMLTableCellElement

Aquí el código: https://jsfiddle.net/wy9tseo7/

1
  • Copia el codigo en la pregunta mejor :D
    – Alfa Rojo
    el 17 ene. 2022 a las 1:28

1 respuesta 1

1

Posible solución:

Deja la función Promedio() de este modo:

function Promedio() {
  var not1 = document.getElementById('not1').value;
  var not2 = document.getElementById('not2').value;
  var not3 = document.getElementById('not3').value;
  var cal = (parseFloat(not1) + parseFloat(not2) + parseFloat(not3)) / 3;
  return cal;
}

Así te devolvera el valor promedio de las tres notas.

Y en la función TablaData cambia esto:

var display = document.getElementsByTagName("td")[6].innerHTML;

por esto

var display = Promedio();

Y en la función apply elimina la llamada a Promedio() y a DeleteBtn();

Aquí te dejo un snippet funcionando con esos cambios:

function Promedio() {
  var not1 = document.getElementById('not1').value;
  var not2 = document.getElementById('not2').value;
  var not3 = document.getElementById('not3').value;
  var cal = (parseFloat(not1) + parseFloat(not2) + parseFloat(not3)) / 3;
  return cal;
}

function TablaData() {
  var rows = "";
  var nombre = document.getElementById("nombre").value;
  var apellidos = document.getElementById("apellidos").value;
  var Sexo = document.querySelector('input[name="Sexo"]:checked').value;
  var not1 = document.getElementById("not1").value;
  var not2 = document.getElementById("not2").value;
  var not3 = document.getElementById("not3").value;
  var display = Promedio();
  rows += "<tr><td>" + nombre + "</td><td>" + apellidos + "</td><td>" + Sexo + "</td><td>" + not1 + "</td><td>" + not2 + "</td><td>" + not3 + "</td><td>" + display + "</td></tr>";
  $(rows).appendTo("#list tbody");

}

function apply() {
  TablaData();
}
<html>

  <head>
    <meta charset="UTF-8">
    <meta name="viewport">
    <title> Registro </title>
  </head>

  <body>
    <div>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <form>
        <p>
          <input type="text" name="nombre" id="nombre" placeholder="Ingrese nombre">
        </p>
        <input type="text" name="apellidos" id="apellidos" placeholder="Ingrese apellido">
        <div>
          <br><input type="radio" name="Sexo" value="Hombre" checked>
          Hombre
          <input type="radio" name="Sexo" value="Mujer">
          Mujer
        </div>
        <div>
          <br><label>Nota primer trismetre</label>
          <input type="number" class="notas" id="not1">
          <br><label>Nota segundo trimestre</label>
          <input type="number" class="notas" id="not2">
          <br><label>Nota tercer trimestre</label>
          <input type="number" class="notas" id="not3">
        </div>
        <div>
          <div>
            <p>
              <select name="curso" id="nombre" placeholder="Curso al que pertenece">
                <option value="1"> Primer curso</option>
                <option value="2"> Segundo curso</option>
              </select>
            </p>
          </div>

        </div>
        <p><button type="button" onclick="apply()" class="media" id="median"> Añadir</button>
        </p>
      </form>
    </div>
    <div id="data"></div>
    <div id="tabla">
      <table id="list" cellspacing="3" cellpadding="3" border="1">
        <thead>
          <tr>
            <td>Nombre</td>
            <td>Apellidos</td>
            <td>Sexo</td>
            <td>Nota 1</td>
            <td> Nota 2</td>
            <td>Nota 3</td>
            <td id="display">Nota Media</td>
            <td id="Eliminar"><input type="button" width="100%" height="100%" name="Eliminar" onclick="DeleteBtn(d)" />Eliminar</td>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </body>

</html>

He borrado también la función DeleteBtn por ser irrelevante en esta pregunta y porque daba un error que no tenia que ver con ella. Cuando la quieras usar aplica la misma lógica que ahora ves con Promedio().

Por cierto, tienes el id="nombre" repetido en tu página y deberias coregirlo.

1
  • Funciona , entendí lo que faltaba . Muchas Gracias.
    – Neo Soul
    el 17 ene. 2022 a las 23:47

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.