如何将数组与单选按钮配对

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

如何将数组与单选按钮配对

回答

相关问题