0

estoy intentando hacer un html que de a escoger al usuario unos valores, y que a través de un script, estos se sumen y devuelvan el resultado, pero no acabo de entender cómo puedo sumar los valores, ni tampoco cómo retornar el valor al hacer clic sobre el botón que he hecho... A ver si alguien puede aclarármelo un poco, gracias desde ya! Os dejo los códigos (los comentarios son cosas que he ido probando y no he querido borrar por su posible utilidad, así es como tengo los códigos ahora mismo):

<script type="application/javascript">

var a = null,b = null,c = null,d = null;

function sumar () {
    var total = 0;  
    //valor = parseInt(valor);

    //total = document.getElementById('resultat').innerHTML;

    //total = (total == null || total == undefined || total == "") ? 0 : total;

    //total = (parseInt(total) + parseInt(valor));

    //document.getElementById('resultat').innerHTML = total;

    total += document.getElementsByName("a").value;
    total += document.getElementsByName("b").value;
    total += document.getElementsByName("c").value;
    total += document.getElementsByName("d").value;
    return total;
}



</script>

Ejercicio 5

<fieldset>

    <legend>Entra quatre números</legend>
    A: <input type="number" name="a">
    B: <input type="number" name="b">
    C: <input type="number" name="c">
    D: <input type="number" name="d">

</fieldset>

<p>A+B+C+D = </p> <p id ="resultat"></p>


<input type="submit" value="Executa el programa" onclick="sumar()">

2
  • Revisa lo que haces con la variable "total" una vez que se ha sumado todo. Sólo la estás devolviendo, pero no la muestras.
    – Freddy Hdz
    Commented el 29 mar. 2017 a las 17:22
  • Acabo de probar con un document.write y además de no mostrar nada, me cambia a otra página, tampoco estoy seguro de estar haciendo el tema de la suma bien... Commented el 29 mar. 2017 a las 17:25

4 respuestas 4

1

Primero que todo, es mucho más rápido obtener un elemento mediante getElementById() (ya que deben y tienen que ser valores únicos) ya que si lo haces mediante getElementsByName() obtendrás un arreglo (ya que el atributo name no es único y varios elementos pueden tener el mismo a diferencia del atributo id) y tendrás que recorrerlo y procesarlo, etc.

Segundo: no estás usando las variables a, b, c y d por lo que las eliminé para hacer más legible el código.

Tercero: debes parsear el valor tomado de cada input con la función parseInt()

Cuarto: en tu función sumar() estabas haciendo un return total; pero no estabas poniendo dicho valor donde querías

Quinto: solo usa <button type="submit"></button> cuando dicho botón esté dentro de un <form></form> de lo contrario siempre usa type="button"

function sumar() {
  var total = 0;

  // Este será nuestro elemento donde poner el valor total de la suma
  var resultado = document.getElementById("resultado");
  
  // Aquí vamos sumando los valores traídos de los input
  // encontrados por su atributo id="" parseados a un número literal
  // con la función parseInt()
  total += parseInt(document.getElementById("a").value);
  total += parseInt(document.getElementById("b").value);
  total += parseInt(document.getElementById("c").value);
  total += parseInt(document.getElementById("d").value);
  
  // Aquí le decimos al elemento resultado que nos muestre la suma
  // de A+B+C+D = total
  resultado.innerHTML = 'A+B+C+D = ' + total;
}
* {
  font-family: monospace;
}
<fieldset>

  <legend>Ingrese cuatro números</legend>
  <!-- Cambiamos nuestro atributo name por id --> 
  A: <input type="number" id="a"><br /> 
  B: <input type="number" id="b"><br /> 
  C: <input type="number" id="c"><br /> 
  D: <input type="number" id="d">

</fieldset>

<p id="resultado">A+B+C+D = </p>

<!-- cambiamos nuestro type="submit" por type="button" -->
<input type="button" value="Sumar" onclick="sumar();">

1

Te muestro un ejemplo para la solución a tu problema, comentado.

function sumar(){
//Buscamos en nuestro documento los input que tienen un nombre; a,b,c,d.
 var a = document.querySelector("input[name='a']");
 var b = document.querySelector("input[name='b']");
 var c = document.querySelector("input[name='c']");
 var d = document.querySelector("input[name='d']");
 //Buscamos un elemento por su id; resultat
 var r = document.getElementById("resultat");
 //Agregamos una variable suma y sumamos todos los valores
 //Ojo: En Javascript puedes convertir un valor a entero con tan solo anteponerle el simbolo + (mas), pero no aplica cuanto tienes algo como; a1, esto te daria error, pero si funciona con: 1a (devuelve: 1).
 var suma =((+a.value)+(+b.value)+(+c.value)+(+d.value));
 // agregamos el resultado dentro del span.
 r.innerHTML = suma;
}
<fieldset>

    <legend>Entra quatre números</legend>
    A: <input type="number" name="a"><br/>
    B: <input type="number" name="b"><br/>
    C: <input type="number" name="c"><br/>
    D: <input type="number" name="d"><br/>

</fieldset>

<p>A+B+C+D = <span id ="resultat"> </span></p>


<input type="submit" value="Executa el programa" onclick="sumar()">

1

Estas usando name y getElementsByName por tanto lo correcto es total += document.getElementsByName("a")[0].value; en lugar de total += document.getElementsByName("a").value; y para asegurar se interprete como número aplicar conversión antes de su uso total += parseFloat(document.getElementsByName("a")[0].value);.

Desde luego tambien puede hacer uso de getElementById para ello cada input en vez de poner su name usa id; ejm: <input type="number" id="a">

Otra cosa que tienes es que al final de tu función usas solo return y no la asignas a nada; sería:

document.getElementById("resultat").innerHTML=total;
// Como el tag P tiene "id" el getElementById funciona.
1

getElementsByName('name') Siempre retornará un arreglo dado que puede haber más de un elemento con el mismo atributo nombre.

Para solucionar tu problema bastaría con acceder al primer elemento que retorna la getElementsByName() , además no olvidar de realizar el cast a dicho valor.

parseInt(document.getElementsByName("a")[0].value);

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.