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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.