How to call a var within a function

0

I'm trying to get a var that hize in a function and it's not working, it does not return what I want, which is only the var ..

My html are the 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>

And here is my javascript , which has the problem:

<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>

I just want to use var tiempo , I'm not getting it ...

    
asked by Juanse Portillo 15.11.2018 в 15:22
source

2 answers

1

Try this:

<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>
    
answered by 15.11.2018 / 16:07
source
0

You can declare the time variable at the beginning, I have set the value of the radio input as selected by default, and if you select another radio change.

To detect which one is clicked I have collected them with a common class using jQuery , or if you prefer only javascript , you modify the variable when the value of the radio input changes.

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>
    
answered by 15.11.2018 в 17:05