如何將數組與單選按鈕配對

我對Java和C++有一個基本的瞭解，但對於Javascript，我仍然很陌生。我正在嘗試創建5個按鈕，這將啓動一個小型的加法測驗。第一個數字將是一個0-12的隨機數，但第二個數字將是靜態的。第二位數字將取決於用戶的選擇。我一直在尋找如何使用單選按鈕獲取整數的一段時間。我想找到這個爲了在數組上實現。任何形式的幫助，將不勝感激。如何將數組與單選按鈕配對

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();獲取當前的難度值。對於同一作業，另一個較短的選擇器也可以是dif=$(".options :checked").val();，因爲在<div class="options">中只有一組單選按鈕。

無論你做什麼 - 你應該不惜一切代價避免使用document.write()，因爲它會弄亂你的文檔結構。

來源

2017-07-02 18:54:34 cars10m

如何將數組與單選按鈕配對

回答

相關問題