ラジオボタンと配列をペアにする方法

私はJavaとC++の基本的な理解を持っていますが、私はまだJavascript & htmlの新機能です。私は小さな追加のクイズを開始する5つのボタンを作成しようとしています。最初の数字は0〜12の乱数ですが、2番目の数字は静的です。 2桁目は、ユーザーの選択に依存します。私は、ラジオボタンを使って整数を得る方法についてしばらく探しています。私は配列で実装するためにこれを見つけたいと思います。どんな種類の助けにも感謝します。ラジオボタンと配列をペアにする方法

function startAdd(){ 
 
    const Add_One = 1; 
 
    var answer; 
 
    var random = new Array(); 
 
    for (var i = 0; i < 21; i++){ 
 

 
    random.push(Math.floor(Math.random() * 13)); 
 
    console.log(random[i]); 
 

 
} 
 
// console.log(Add_One); 
 
// var x = prompt('Enter something lil boi'); 
 
// var num1 = parseInt(x); 
 
// console.log(x); 
 

 

 
    for(var a = 0;a < 21; a++){ 
 

 
    document.write(random[a] + " + " + Add_One + " =" + "<br>"); 
 

 
// if(random[a]+Add_One = answer) 
 

 
    } 
 

 
}

<body> 
 
<h1>RicoMath</h1> 
 
<h1 class = "add">Addition</h1> 
 
<h2>Difficulty</h2> 
 
      <div class="options"> 
 
      <div> 
 
       <input id="num1" type="radio" name="dif" value="1"> 
 
       <label for="num1">1</label> 
 
      </div> 
 
      <div> 
 
       <input id="num2" type="radio" name="dif" value="2"> 
 
       <label for="num2">2</label> 
 
      </div> 
 
      <div> 
 
       <input id="num3" type="radio" name="dif" value="3" checked> 
 
       <label for="num3">3</label> 
 
      </div> 
 
      <div> 
 
       <input id="num4" type="radio" name="dif" value="4"> 
 
       <label for="num4">4</label> 
 
      </div> 
 
      <div> 
 
       <input id="num5" type="radio" name="dif" value="5"> 
 
       <label for="num5">5</label> 
 
      </div> 
 
      </div> 
 

 
      <button onclick = "startAdd()">Begin!!!!</button> 
 

 
</body>

出典

2017-07-02 John Salazar

あなたはあなたの質問にjqueryというタグを付けましたが、あなたはそれをどうしても避けようとしているようです。あなたはあなたのスニペットに図書館を含めていませんでした。その理由は何ですか？ – cars10m

申し訳ありませんが、私はまだjqueryの新機能です。私がそれをタグ付けした唯一の理由は、私がこの問題を解決するためにそれを使用するという考えに門を開いているからです。迅速な対応をありがとう！ –

-1

私はあなたが数字で何をしたいのか、右を理解するが、ここであなたはそれを得ることができる方法だしないでください！

jQueryの

var second_digit = $('input[name="dif"]:checked').val();

javascriptの読み取り値が文字列の場合、単に行う

var radios = document.getElementsByName("dif"); 
var second_digit = null; 
for (var i = 0; i < radios.length; i++) { 
    if (radios[i].checked) { 
     second_digit = radios[i].value; 
     //skip other radios as only one can be selected 
     break; 
    } 
}

second_digit = second_digit * 1;

または

second_digit = Number(second_digit);

これは数値にキャストされます。

出典

2017-07-02 17:47:40

実用的な解決策があります。それが役に立てば幸い！

function startAdd(){ 
 

 
     var random = new Array(); 
 
     for (var i = 0; i < 21; i++){ 
 

 
      random.push(Math.floor(Math.random() * 13)); 
 
      console.log(random[i]); 
 
     } 
 

 
     var allRadioButtons = document.getElementsByName("dif"); 
 
     var secondNumber; 
 

 
     for(var i in allRadioButtons){ 
 
       if(allRadioButtons[i].checked){ 
 
       secondNumber = +allRadioButtons[i].value; 
 
       break; 
 
       } 
 
     } 
 

 
     for(var a = 0;a < 21; a++){ 
 
      document.write(random[a] + " + " + secondNumber + " =" + (random[a] + secondNumber)+"<br>"); 
 
     } 
 
    }

<h1>RicoMath</h1> 
 
<h1 class = "add">Addition</h1> 
 
<h2>Difficulty</h2> 
 
<div class="options"> 
 
    <div> 
 
     <input id="num1" type="radio" name="dif" value="1"> 
 
     <label for="num1">1</label> 
 
    </div> 
 
    <div> 
 
     <input id="num2" type="radio" name="dif" value="2"> 
 
     <label for="num2">2</label> 
 
    </div> 
 
    <div> 
 
     <input id="num3" type="radio" name="dif" value="3" checked> 
 
     <label for="num3">3</label> 
 
    </div> 
 
    <div> 
 
     <input id="num4" type="radio" name="dif" value="4"> 
 
     <label for="num4">4</label> 
 
    </div> 
 
    <div> 
 
     <input id="num5" type="radio" name="dif" value="5"> 
 
     <label for="num5">5</label> 
 
    </div> 
 
</div> 
 

 
<button onclick = "startAdd()">Begin!!!!</button>

出典

2017-07-02 18:11:13 HenryDev

私はあなたの質問に私のコメントで既に述べたように、あなたは、すべてのjqueryのを使用していません。ここでは、jQueryのあなたのための作業の一部を行うために得ることができる方法の初歩的な例である：

for (var opts=[],i=1;i<6;i++) // first: build the radio button menu 
 
    opts.push('<input id="num'+i 
 
      +'" type="radio" name="dif" value="'+i 
 
      +'"><label for="num'+i+'">'+i+'</label>'); 
 
$('div.options').html(opts.join('<br>\n')); 
 

 
$('button').click(function(){ // define the click action 
 
    var dif=$("input[type=radio][name=dif]:checked").val(); 
 
    // or: dif=$(".options :checked").val(); 
 
    console.log('difficulty from checkbox: '+dif); 
 
    const Add_One = 1; 
 
    var answer, random = new Array(); 
 
    for (var i = 0; i < 21; i++){ 
 
    random.push(Math.floor(Math.random()*13)+' + '+Add_One+' ='); 
 
    } 
 
    $('.questions').html(random.join('<br>\n')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
<h1>RicoMath</h1> 
 
<h1 class="add">Addition</h1> 
 
<h2>Difficulty</h2> 
 
<div class="options"></div> 
 
<button>Begin!!!!</button> 
 
<div class="questions"></div> 
 
</body>

私は現在の難易度の値を取得するためにdif=$("input[type=radio][name=dif]:checked").val();を使用。 <div class="options">にラジオボタンのグループが1つしかないので、同じジョブの別の短いセレクタをdif=$(".options :checked").val();にすることもできます。

あなたが何をしていても、document.write()の使用は避けてください。文書構造が壊れてしまいます。

出典

2017-07-02 18:54:34 cars10m

ラジオボタンと配列をペアにする方法

答えて

関連する問題