1

Estoy intentando calcular el promedio de 4 notas pero no me presenta error, solo que no hace nada, verifiqué todo el código pero no sé cuál es el problema.

Este es el código html con sus inputs:

<form role="form">        
        <div class="form-group">
        <label>nota 1</label>
            <input type="number" class="form-control" id="nota1" placeholder="ingrese nota1">
        </div>
        <div class="form-group">
        <label>nota 2</label>
            <input type="number" class="form-control" id="nota2" placeholder="ingrese nota2">
        </div>
        <div class="form-group">
        <label>nota 3</label>
            <input type="number" class="form-control" id="nota3" placeholder="ingrese nota3">
        </div>
        <div class="form-group">
        <label>nota 4</label>
            <input type="number" class="form-control" id="nota4" placeholder="ingrese nota4">
        </div>
        <button type="button" class="btn btn-primary" id="btn">Calcular</button>
    </form>
                </div>
            </div>
             <h3>resultados</h3>
    <input type="number" id="display"value="0" readonly>

Y este el código js:

window.onload = function init() {
var nota1 = document.getElementById('nota1').value;
var nota2 = document.getElementById('nota2').value;
var nota3 = document.getElementById('nota3').value;
var nota4 = document.getElementById('nota4').value;
var btn = document.getElementById('btn');
var display = document.getElementById('display');
btn.addEventListener('click', promedio, false);
}

function promedio() {
    var cal = (parseFloat(nota1) + parseFloat(nota2) + parseFloat(nota3) + parseFloat(nota4)) / 4;
    display.innerHTML = cal;
}

No me muestra ningún error.

3
  • Hola, prueba en lugar de display.innerHTML = cal; pon display.value = cal; ya que es un input. el 8 sep. 2019 a las 14:46
  • No me funciona, se eliminar el 0 que tengo como valor DEFAULT en display pero no muestra el resultado.
    – andrioris
    el 8 sep. 2019 a las 14:50
  • y no podrías colocar todo el contenido de la función init dentro de la función promedio y agregarle un onclick al button? aunque el problema es muy sencillo seguro te responden. el 8 sep. 2019 a las 14:53

2 respuestas 2

3

EXPLICACIÓN

  • innerHTML no funciona para modificar el valor de un elemento del DOM de tipo input, en su lugar deberás usar value para modificar el valor de dicha propiedad.
  • Dado que la única funcionalidad que buscas es realizar el cálculo de las notas cuando se desencadena un evento en el botón con id btn, entonces mejor:
  • Recupera dicho botón y agregale un listener en el evento click, para que entienda que debe ejecutar algo cuando esa acción ocurra.

Código

    var btn = document.getElementById('btn');
    btn.addEventListener("click", function promedio() {
      var nota1 = document.getElementById('nota1').value;
      var nota2 = document.getElementById('nota2').value;
      var nota3 = document.getElementById('nota3').value;
      var nota4 = document.getElementById('nota4').value;
      var display = document.getElementById('display');
      var cal = (parseFloat(nota1) + parseFloat(nota2) + parseFloat(nota3) + parseFloat(nota4)) / 4;
      display.value = cal;
})

EJEMPLO COMPLETO

    <form role="form">        
            <div class="form-group">
            <label>nota 1</label>
                <input type="number" class="form-control" id="nota1" placeholder="ingrese nota1">
            </div>
            <div class="form-group">
            <label>nota 2</label>
                <input type="number" class="form-control" id="nota2" placeholder="ingrese nota2">
            </div>
            <div class="form-group">
            <label>nota 3</label>
                <input type="number" class="form-control" id="nota3" placeholder="ingrese nota3">
            </div>
            <div class="form-group">
            <label>nota 4</label>
                <input type="number" class="form-control" id="nota4" placeholder="ingrese nota4">
            </div>
            <button type="button" class="btn btn-primary" id="btn">Calcular</button>
        </form>
                    </div>
                </div>
                 <h3>resultados</h3>
        <input type="number" id="display"value="0" readonly>
    
    <script>
        var btn = document.getElementById('btn');
          btn.addEventListener("click", function promedio() {
            var nota1 = document.getElementById('nota1').value;
            var nota2 = document.getElementById('nota2').value;
            var nota3 = document.getElementById('nota3').value;
            var nota4 = document.getElementById('nota4').value;
            var display = document.getElementById('display');
            var cal = (parseFloat(nota1) + parseFloat(nota2) + parseFloat(nota3) + parseFloat(nota4)) / 4;
            display.value = cal;
        })
    </script>

Referencia

Revisa este enlace para conocer todos los atributos que tienen los inputs

1
  • Gracias por la info amigo, me sirvió mucho de ayuda.
    – andrioris
    el 8 sep. 2019 a las 16:17
1

Te dejo la solución a continuación

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <form role="form">
        <div class="form-group">
            <label>nota 1</label>
            <input type="number" class="form-control" id="nota1" placeholder="ingrese nota1">
        </div>

        <div class="form-group">
            <label>nota 2</label>
            <input type="number" class="form-control" id="nota2" placeholder="ingrese nota2">
        </div>

        <div class="form-group">
            <label>nota 3</label>
            <input type="number" class="form-control" id="nota3" placeholder="ingrese nota3">
        </div>

        <div class="form-group">
            <label>nota 4</label>
            <input type="number" class="form-control" id="nota4" placeholder="ingrese nota4">
        </div>

        <button type="button" onclick="promedio()" class="btn btn-primary" id="btn">Calcular</button>
    </form>

    <h3>resultados</h3>
    <input type="number" id="display" value="0" readonly>
</body>

<script>
    function promedio() {
        var nota1 = document.getElementById('nota1').value;
        var nota2 = document.getElementById('nota2').value;
        var nota3 = document.getElementById('nota3').value;
        var nota4 = document.getElementById('nota4').value;
        var btn = document.getElementById('btn');
        var display = document.getElementById('display');

        var cal = (parseFloat(nota1) + parseFloat(nota2) + parseFloat(nota3) + parseFloat(nota4)) / 4;
        display.value = cal;
    }
</script>

</html>
2
  • Gracias amigo, me funcionó.
    – andrioris
    el 8 sep. 2019 a las 16:16
  • 2
    Hiciste exactamente lo que comente en la pregunta, al menos agrega una explicación para mejorar la calidad de la respuesta. el 8 sep. 2019 a las 16:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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