Значение радио кнопки в другую функцию

Question

Я застрял в этом коде: я не могу получить значение проверенного переключателя для использования в другой функции.

<script> 
    function obtenerCD(browser) { 
    document.getElementById('resultadoCD').innerHTML = browser; 
    return browser; 
    } 

    function myFunction() { 
     var a = "http://www.example.com/"; 
     var b = document.getElementById('variablea').value; 
     var c = "/?Ancho="; 
     var d = document.getElementById('variableb').value; 
     var e = "%20M&Ancho%20Fraccion="; 
     var f = document.getElementById('variablec').value; 
     var g = "%20Cm"; 
     var h = "&Color%20Y%20Di%C3%A1metro="; 
     var i = "Natural%2020-40%20Mm"; // variable inicial por defecto 
     link = a + b + c + d + e + f + g + h + i; 

     /* inicio test area */ 
     document.getElementById("demo").innerHTML = link; 
     document.getElementById("boton").href = link; 
    } 
    /* fin test area */ 
</script> 
<form> 

    <p> 
    (1) Elige la Altura: 
    <select id="variablea" style="width:85px;" onchange="myFunction()"> 
     <option value="5-00-m">5.00 m</option> 
     <option value="4-90-m">4.90 m</option> 
     <option value="4-80-m">4.80 m</option> 
     <option value="4-70-m">4.70 m</option> 
     <option selected="selected" value="2-00-m" style "color:blue;">2.00 m *</option> 
     <option value="1-90-m">1.90 m</option> 
     <option value="1-80-m">1.80 m *</option> 
    </select> 
    </p> 

    <p> 
    (2) Elige el Ancho: 
    <select id="variableb" style="width:90px;" onchange="myFunction()"> 
     <option value="1" selected="selected">1 metro</option> 
     <option value="2">2 metros</option> 
     <option value="3">3 metros</option> 
     <option value="4">4 metros</option> 
     <option value="5">5 metros</option> 
     <option value="6">6 metros</option> 
     <option value="7">7 metros</option> 
     <option value="8">8 metros</option> 
     <option value="9">9 metros</option> 
     <option value="10">10 metros</option> 
    </select> 
    <select id="variablec" style="width:70px;" onchange="myFunction()"> 
     <option value="0" selected="selected">0 cm</option> 
     <option value="10">10 cm</option> 
     <option value="20">20 cm</option> 
     <option value="30">30 cm</option> 
     <option value="40">40 cm</option> 
     <option value="50">50 cm</option> 
     <option value="60">60 cm</option> 
     <option value="70">70 cm</option> 
     <option value="80">80 cm</option> 
     <option value="90">90 cm</option> 
    </select> 
    </p> 

    <p> 
    (3) Elige el Color y el Di&aacute;metro: 

    <div class="cd-selector"> 
     <input checked="checked" id="natural24" type="radio" name="browser" value="Natural%2020-40%20Mm" onclick="obtenerCD(this.value)"> 
     <label class="drinkcard-cc natural24" for="natural24">natural24</label> 
     <input id="natural35" type="radio" name="browser" value="Natural%2030-50%20Mm" onclick="obtenerCD(this.value)"> 
     <label class="drinkcard-cc natural35" for="natural35">natural35</label> 
     <input id="dorado24" type="radio" name="browser" value="Dorado%2020-40%20Mm" onclick="obtenerCD(this.value)"> 
     <label class="drinkcard-cc dorado24" for="dorado24">dorado24</label> 
     <input id="dorado35" type="radio" name="browser" value="Dorado%2030-50%20Mm" onclick="obtenerCD(this.value)"> 
     <label class="drinkcard-cc dorado35" for="dorado35">dorado35</label> 
    </div> 
    </p> 
    <p><a href="http://www.example.com" id="boton" />Aceptar</a> 
    </p> 
</form> 
<p>--- Inicio test area ---</p> 
<p>Link compuesto: <span id="demo"></span> 
</p> 
<p>Variable Color y Diametro: <span id="resultadoCD"></span> 
</p> 
<p>--- Fin test area ---</p> 

Answer 1

Самый простой способ получить значение проверяемого кнопки радио, чтобы использовать метод querySelector который принимает селектор CSS-стиль в качестве параметра.

document.querySelector('input[name="browser"]:checked').value; 

Answer 2

Вы уже читаете значение этой функции. Проблема заключается в загрузке страницы, даже если флажок установлен, вы не видите никакого значения.

Причина в том, флажок уже checked атрибут, но функция вызывается только на onclick

function obtenerCD(browser) { 
 
    console.log(browser); 
 
    document.getElementById('resultadoCD').innerHTML = browser; 
 
} 
 

 
document.getElementById('resultadoCD').innerHTML = document.querySelector('input[name="browser"]:checked').value;;

<input checked="checked" id="natural24" type="radio" name="browser" value="Natural%2020-40%20Mm" onclick="obtenerCD(this.value)"> 
 
<label class="drinkcard-cc natural24" for="natural24">natural24</label> 
 
<input id="natural35" type="radio" name="browser" value="Natural%2030-50%20Mm" onclick="obtenerCD(this.value)"> 
 
<label class="drinkcard-cc natural35" for="natural35">natural35</label> 
 
<input id="dorado24" type="radio" name="browser" value="Dorado%2020-40%20Mm" onclick="obtenerCD(this.value)"> 
 
<label class="drinkcard-cc dorado24" for="dorado24">dorado24</label> 
 
<input id="dorado35" type="radio" name="browser" value="Dorado%2030-50%20Mm" onclick="obtenerCD(this.value)"> 
 
<label class="drinkcard-cc dorado35" for="dorado35">dorado35</label> 
 

 
<p>Variable Color y Diametro: <span id="resultadoCD"></span> 
 
</p>