Como llamar a una var dentro un function

Question

Estoy tratando de sacar una var que hize en un function y no me esta funcionando, no me devuelve lo que quiero, que es solo el var..

Mi html son los radiobutton:

<div class="box-body">

  <form method="post" name="formulario">

  <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md">
      <input type="radio" name="input_radio" checked value="3000"> 
      <i class="primary"></i> <b>5 minutos</b>
   </label><br><br>
   <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md">
      <input type="radio" name="input_radio" value="15000"> 
      <i class="primary"></i> <b>10 minutos</b>
   </label><br><br>
   <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md">
      <input type="radio" name="input_radio" value="30000"> 
      <i class="primary"></i> <b>15 Minutos</b>
   </label><br><br>

   <button type="button" id="btn_radio" class="btn btn-outline rounded b-primary text-primary">Enviar</button>

   </form>

</div>

Y aquí esta mi javascript, que tiene el problema:

<script>
  window.onload=function(){

    var btn_radio =  document.getElementById("btn_radio");

    btn_radio.onclick = function sacartiempo(){

      var input_radio = document.formulario.input_radio;

      for(x=0; x<input_radio.length; x++){

        if (input_radio[x].checked) {

          var tiempo = input_radio[x].value;

          alert("Se aplicaron los cambios!");

        }
      }
     return tiempo;
    }

    console.log(sacartiempo());

    // OSINO TAMBIEN PRUEBO 

    console.log(btn_radio.onclick);

    };

</script>

Solamente quiero usar el var tiempo, no lo estoy consiguiendo...

esto tiene su nombre como closure, el error que te da es porque deberias declarar tiempo antes del for — JackNavaRow, Nov 15 '18 at 14:47
que quieres hacer en particular , puede que tengas codigo que no es necesario — JackNavaRow, Nov 15 '18 at 14:56
Hice los `radiobuttons`, para colocar un intervalo de tiempo en otro lado, y para eso quiero el `var` tiempo, por eso los `values` estan en segundos.., porque quiero usar ese... — Juanse Portillo, Nov 15 '18 at 15:01
intenta hacerlo de la siguiente forma `document.getElementById("btn_radio").click()` en el console.log — JackNavaRow, Nov 15 '18 at 15:11

score 1 · Accepted Answer · answered Nov 15 '18 at 15:07

Intenta con esto:

<script>
  window.onload=function(){

    var btn_radio =  document.getElementById("btn_radio");

    var sacartiempo = function(){

      var tiempo = null;

      var input_radio = document.formulario.input_radio;

      for(x=0; x<input_radio.length; x++){

        if (input_radio[x].checked) {

          tiempo = input_radio[x].value;

          alert("Se aplicaron los cambios!");

        }
      }
      return tiempo;
    }

    btn_radio.onclick = sacartiempo;

    console.log(sacartiempo());

    };

</script>

score 0 · Answer 2 · answered Nov 15 '18 at 16:05

Puedes declarar la variable tiempo al inicio, he puesto el valor que tiene el input radio como seleccionado por defecto, y si se selecciona otro radio cambia.

Para detectar en cual se hace click los he recogido con una clase común mediante jQuery, o si prefieres sólo javascript, modificas la variable cuando el valor del input radio cambia.

var tiempo = 3000;
var input_radio = document.formulario.input_radio;

//Opción con jQuery
$(".inprad").click(function(){     
     for(x=0; x<input_radio.length; x++){
        if (input_radio[x].checked) {
          tiempo = input_radio[x].value;
          alert("Se aplicaron los cambios!");
          console.log("jq " + tiempo);
        }
      }
  });
  
  //Opción con javascript
  var tiempo2 = 3000;
  for(x=0; x<input_radio.length; x++){
        input_radio[x].addEventListener('change', function() {
            
            if(this !== tiempo2) {
                tiempo2 = this;
            }
            console.log("js "+tiempo2.value)
        });
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-body">

  <form method="post" name="formulario">

  <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md">
      <input type="radio" name="input_radio" checked value="3000" class="inprad"> 
      <i class="primary"></i> <b>5 minutos</b>
   </label><br><br>
   <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md">
      <input type="radio" name="input_radio" value="15000" class="inprad"> 
      <i class="primary"></i> <b>10 minutos</b>
   </label><br><br>
   <label class="radio radio-inline m-a-0 ui-check ui-check-color ui-check-md">
      <input type="radio" name="input_radio" value="30000" class="inprad"> 
      <i class="primary"></i> <b>15 Minutos</b>
   </label><br><br>

   <button type="button" id="btn_radio" class="btn btn-outline rounded b-primary text-primary">Enviar</button>

   </form>

</div>

Como llamar a una var dentro un function

2 Answers2