0

Tengo este tipo de preguntas en el formulario:

<form>
        <label for="Pregunta1">Beber agua</label>
            <select id = "Pregunta1" name="Pregunta1" onchange="obtenerValor(this.id)">
                <option value="0">Nunca</option> 
                <option value="1">Casi nunca</option> 
                <option value="2">A veces</option>
                <option value="3">Bastantes veces</option>
                <option value="4">Casi siempre</option>
            </select>

        <label for="Pregunta2">Ir al baño</label>
            <select id = "Pregunta2" name="Pregunta2" onchange="obtenerValor(this.id)">
                <option value="0">Nunca</option> 
                <option value="1">Casi nunca</option> 
                <option value="2">A veces</option>
                <option value="3">Bastantes veces</option>
                <option value="4">Casi siempre</option>
            </select>
        <input type ="button" value ="Enviar" onclick="enviar()">

    </form>

Y tengo esta función que me recoge los valores y me funciona bien. Lo que pasa es que si por ejemplo se cambia de opcion, los 2 valores se guardan es decir, el 1 que se eligió y el 2 por el que se cambia.

 var valor = 0;
  
        function obtenerValor(id){
                valor += parseInt(document.getElementById(id).value);
                return valor; 
            }
        function enviar(){
            console.log("valor enviado", valor);
        }

He intentado llamar a la funcion de obtenerValor(id) en la de enviar() pero no funciona. Lo que necesito es que se recojan los valores pero una vez enviados, no que si se cambia de opcion el valor anterior permanece guardado (ese no deberia guardarse).

1 respuesta 1

1

Puedes reducir todo eso a esto:

function enviar() {
  let valor = 0
  let los_select = document.querySelectorAll('select')
  for (i = 0; i < los_select.length; i++) {
    valor += parseInt(document.getElementById(los_select[i].id).value);
  }
  console.log("valor enviado", valor);
}
<form>
  <label for="Pregunta1">Beber agua</label>
  <select id="Pregunta1" name="Pregunta1">
    <option value="0">Nunca</option>
    <option value="1">Casi nunca</option>
    <option value="2">A veces</option>
    <option value="3">Bastantes veces</option>
    <option value="4">Casi siempre</option>
  </select>

  <label for="Pregunta2">Ir al baño</label>
  <select id="Pregunta2" name="Pregunta2">
    <option value="0">Nunca</option>
    <option value="1">Casi nunca</option>
    <option value="2">A veces</option>
    <option value="3">Bastantes veces</option>
    <option value="4">Casi siempre</option>
  </select>
  <input type="button" value="Enviar" onclick="enviar()">
</form>

Cambios realizados

  1. En el HTML se han quitado los onchange porque no tenian demasiado sentido y eran propensos a causar errores.
  2. En el javascript se ha eliminado también la función obtenervalor() pues ya no se usará en esta solución
  3. Se ha quitado la linea var valor = 0 porque no hace falta que esa variable ahora sea global. La podemos usar dentro de la función enviar() sin necesidad que salga de su ámbito.
  4. Se ha modificado la función enviar() por esto:
      let valor = 0
      let los_select = document.querySelectorAll('select')
      for (i = 0; i < los_select.length; i++) {
        valor += parseInt(document.getElementById(los_select[i].id).value);
      }
      console.log("valor enviado", valor);

donde en:

  •     let valor = 0
    

definimos una variable local dentro solo de la función enviar(), que será la que usaremos para ir sumando los valores de los select.

  •     let los_select = document.querySelectorAll('select')
    

mediante la función querySelectorAll() creamos una lista de nodos de los elementos select que podremos recorrer con un bucle for despues y la almacenamos en la variable local los_select.

  •     for (i = 0; i < los_select.length; i++) {
    

recorremos los elementos selectuno a uno de la lista de nodos

  •         valor += parseInt(document.getElementById(los_select[i].id).value);
    

Sumamos a valor el valor (value) en forma de número entero (parseInt) del elemento iterado en este ciclo (los_select[i]) con la función getElementById() pasándole el valor de su id (los_select[i].id).

Esto nos recorrerá todos los select y los irá sumando hasta que al final, cuando salga del bucle, se muestre en consola el resultado con:

      console.log("valor enviado", valor);

Cabe decir que cada vez que se ejecuta esta función se resetea el valor de valor y se vuelven a recorrer todos los select tal como acabo de explicar.

2
  • Si, esto era justo lo que quería. Muchas gracias por todo, te lo agradezco!
    – Aitana
    Commented el 22 mar. 2022 a las 10:11
  • Bien, me alegro que te haya funcionado :-) Saludos
    – masterguru
    Commented el 22 mar. 2022 a las 10:28

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.