1

Tengo la siguiente función para obtener los los valores 0, 1 o 2 de los botones tipo radio de 2 categorías (ciclos for) La idea es poder sumar (y enviar al botón TOTAL) las 2 categorías.

Dejo el código. Me arroja undefined.

<form>
   <input type="radio" name="dressing"  value="0">0 </input>
   <input type="radio" name="dressing"  value="1">1 </input>
   <input type="radio" name="dressing"  value="2">2 </input>

   <input type="radio" name="stairs"  value="0">0 </input>
   <input type="radio" name="stairs"  value="1">1 </input>
   <input type="radio" name="stairs"  value="2">2 </input>
                                </form>

   <h3 id="resultRadioDressing">Value of Radio Bottons in Dressing</h3>
   
   <h3 id="resultRadioStairs">Value of Radio Bottons in Stairs</h3>
   <button type="button" onclick="displayRadioValue()">  Get Categories Values </button>
   
   
   <h3 id="ResultTOTAL">TOTAL SCORE</h3>
   <button  type="button" onclick="displayRadioValue()">TOTAL Button</button>
   
<script> 
      
function displayRadioValue(){
  var dressing = document.getElementsByName('dressing');
      
    for(i = 0; i < dressing.length; i++)  {
    if(dressing[i].checked) 
    document.getElementById("resultRadioDressing").innerHTML
        = "Value of Radio Bottons in Dressing is "+ 
       dressing[i].value;
    
                                 } 
  var stairs = document.getElementsByName('stairs');                                   
    
    for(j = 0; j < stairs.length; j++)     {
    if(stairs[j].checked) 
    document.getElementById("resultRadioStairs").innerHTML
        = "Value of Radio Bottons in Stairs is "+ 
          stairs[j].value;
                                    }
document.getElementById("ResultTOTAL").innerHTML = parseInt(dressing[i].value) + parseInt(stairs[j].value);   
                                      }                 
 </script> 

Browser

2 respuestas 2

0

El problema es que donde estas implementando la operación de suma al final ya no tienes acceso a los valores internos de los loops, para solucionarlo podrias adicionar un par de variables para que se les pueda reasignar el valor y poder acceder a diferentes escopos. Aqui te dejo un ejemplo con parte del codigo que modifique, me haces saber si te fue de ayuda.

function displayRadioValue() {
    var dressing = document.getElementsByName('dressing');
    var dressingValue = 0;

      for(i = 0; i < dressing.length; i++)  {
        if(dressing[i].checked) {
          dressingValue = dressing[i].value;
          document.getElementById("resultRadioDressing").innerHTML = "Value of Radio Bottons in Dressing is " + dressingValue;
        } 
      }

    var stairs = document.getElementsByName('stairs');    
    var stairsValue = 0;                               
      
      for(j = 0; j < stairs.length; j++) {
          if(stairs[j].checked) {
            stairsValue = stairs[j].value;
            document.getElementById("resultRadioStairs").innerHTML = "Value of Radio Bottons in Stairs is " + stairsValue;
          }
        }

    document.getElementById("ResultTOTAL").innerHTML = parseInt(dressingValue) + parseInt(stairsValue);   
  }                
<form>
  <input type="radio" name="dressing"  value="0">0 </input>
  <input type="radio" name="dressing"  value="1">1 </input>
  <input type="radio" name="dressing"  value="2">2 </input>

  <input type="radio" name="stairs"  value="0">0 </input>
  <input type="radio" name="stairs"  value="1">1 </input>
  <input type="radio" name="stairs"  value="2">2 </input>
</form>

<h3 id="resultRadioDressing">Value of Radio Bottons in Dressing</h3>

<h3 id="resultRadioStairs">Value of Radio Bottons in Stairs</h3>
<button type="button" onclick="displayRadioValue()">  Get Categories Values </button>
  
  
<h3 id="ResultTOTAL">TOTAL SCORE</h3>
<button  type="button" onclick="displayRadioValue()">TOTAL Button</button>

1
  • 1
    Muchas gracias a ambos! funcionó muy bien.
    – Ociel
    Commented el 7 nov. 2022 a las 4:03
0

Try this:

  <script>

    function displayRadioValue() {
      let dressing = document.getElementsByName("dressing");
      let stairs = document.getElementsByName("stairs")
      let n_dress = 0;
      let n_star = 0;

      dressing.forEach(dress => {
        if(dress.checked){
          document.querySelector("#resultRadioDressing").innerHTML+=": "+ dress.value;
          n_dress = dress.value
        }
      });

      stairs.forEach(star => {
        if(star.checked){
          document.querySelector("#resultRadioStairs").innerHTML+=": "+star.value;
          n_star = star.value
        }
      });

      document.querySelector("#ResultTOTAL").innerHTML+=": " + (n_dress + n_star)
    }                 
  </script>

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.