JavaScript - Cómo sumar valores de una lista

   
Vista:

Cómo sumar valores de una lista

Publicado por H (2 intervenciones) el 11/11/2017 08:32:00
Quisiera saber como sumar valores de una lista
Ejemplo:

1
2
3
4
5
6
7
8
9
10
<form>
<select>
<option>2</option>
<option>5<option>
</select >
<select>
<option>7</option>
<option>2<option>
</select >
</form>
El resultado es: 4


¿como extraer el valor de cada select y sumar?
A quien me pueda ayudar se lo agradecería.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de abzerox

Cómo sumar valores de una lista

Publicado por abzerox (100 intervenciones) el 12/11/2017 02:54:03
Hola, hize un pequeño código quizas te sirva:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <form id="form">
      <select id="list_1">
        <option value="">Selecciona un valor</option>
        <option value="2">2</option>
        <option value="5">5</option>
      </select >
      <select id="list_2">
        <option value="">Selecciona un valor</option>
        <option value="7">7</option>
        <option value="2">2</option>
      </select >
    </form>
    <p id="result"></p>
    <script>
      (function () {
        const list1 = document.getElementById('list_1');
        const list2 = document.getElementById('list_2');
        const onChange = (e) => {
          let result = document.getElementById('result');
          result.innerHTML = '';
          if (list1.value && list2.value)
            result.innerHTML = parseInt(list1.value) + parseInt(list2.value);
        };
 
        list1.addEventListener('change', onChange);
        list2.addEventListener('change', onChange);
      })();
    </script>
  </body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar