ラジオボタンの値を別の関数に設定する

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

チェックされたラジオボタンの値を取得する最も簡単な方法は、CSSスタイルのセレクタをパラメータとして使用するquerySelectorメソッドを使用することです。

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

Answer 2

すでに関数の値が読み込まれています。問題は、ページが読み込まれ、チェックボックスがチェックされていても値が表示されていない場合でも問題です。

理由ビーイング、チェックボックスがすでにchecked属性を持っていますが、機能はあなただけは、[バリ]（HTTPSを通して、あなたのコードを渡すことを確認してください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>