在JavaScript中使用For循环

-2

我正在用Javascript进行10个问题测验。我有20个问题，我的目标是让他们中的10个随机出现。以下是我想要做的一些示例代码，但有些事情不对。请告诉我，如果你发现我的错误。在JavaScript中使用For循环

<body> 
    <input type="button" value="Question" onclick="choosequestions()"/><br><br> 

    <div id="q1"></div> 
    <div id="q2"></div> 
    <div id="q3"></div> 
    <div id="q4"></div> 
    <div id="q5"></div> 
    <div id="q6"></div> 
    <div id="q7"></div> 
    <div id="q8"></div> 
    <div id="q9"></div> 
    <div id="q10"></div> 


<body> 

<script> 

    function choosequestions(){ 

     var question=Math.floor((Math.random()*20)+1) 

     if (question==1){ 

      document.getElementById('q1').innerHTML="Question 1" 

     } else if (question==2) { 

      document.getElementById('q1').innerHTML="Question 2" 

     }else if (question==3){ 

      document.getElementById('q1').innerHTML="Question 3" 

     }else if (question==4){ 

      document.getElementById('q1').innerHTML="Question 4" 

     }else if (question==5){ 

      document.getElementById('q1').innerHTML="Question 5" 

     }else if (question==6){ 

      document.getElementById('q1').innerHTML="Question 6" 

     }else if (question==7){ 

      document.getElementById('q1').innerHTML="Question 7" 

     }else if (question==8){ 

      document.getElementById('q1').innerHTML="Question 8" 

     }else if (question==9){ 

      document.getElementById('q1').innerHTML="Question 9" 

     }else if (question==10){ 

      document.getElementById('q1').innerHTML="Question 10" 

     }else if (question==11){ 

      document.getElementById('q1').innerHTML="Question 11" 

     }else if (question==12){ 

      document.getElementById('q1').innerHTML="Question 12" 

     }else if (question==13){ 

      document.getElementById('q1').innerHTML="Question 13" 

     }else if (question==14){ 

      document.getElementById('q1').innerHTML="Question 14" 

     }else if (question==15){ 

      document.getElementById('q1').innerHTML="Question 15" 

     }else if (question==16){ 

      document.getElementById('q1').innerHTML="Question 16" 

     }else if (question==17){ 

      document.getElementById('q1').innerHTML="Question 17" 

     }else if (question==18){ 

      document.getElementById('q1').innerHTML="Question 18" 

     }else if (question==19){ 

      document.getElementById('q1').innerHTML="Question 19" 

     }else if (question==20){ 

      document.getElementById('q1').innerHTML="Question 20" 

     } 
    } 


</script>

来源

2014-02-08 God is good

似乎为我工作，但你只能有一个身体，你好像有几个？ – adeneo

什么不起作用？ – BeNdErR

我认为这是一个错字，第二个标签应该是一个结束标签 –

这个代码对于放在数组中的问题将更易于管理。然后，只需重复10次，抢随机问题：

var questions = ["Question1", "Question2", "Question3", "Question4", "Question5", "Question6", "Question7", "Question8", "Question9", "Question10", "Question11", "Question12", "Question13", "Question14", "Question15", "Question16", "Question17", "Question18", "Question19", "Question20"] ; 

function choosequestions(){ 
    var questionsCopy = questions.slice(0); 

    for(var i=0; i < 10; i++){ 
     var question=Math.floor((Math.random()*questionsCopy.length)+1) 
     var id = "q" + (i+1); 
     document.getElementById(id).innerHTML=questionsCopy.splice(question,1); 
    } 

}

JS小提琴：http://jsfiddle.net/2sY7T/2/

来源

2014-02-08 17:40:20

为切片+1，我学到了新的东西:) – BeNdErR

@BeNdErR谢谢。这应该给出数组的副本。另请注意，splice将返回您正在移除的数组元素，因此您可以将splice返回的元素分配给'innerHTML'。 –

y我也注意到了。 BTW更新你的小提琴，因为在小提琴中你没有使用'questionCopy.length'来产生随机值，并且它可能导致在输出 – BeNdErR

更通用：

HTML：

<div style="display:none" id="template1">What color has snow?</div> 
<div style="display:none" id="template2">second question</div> 
...

JS：

function choosequestions(){ 
    var question=Math.floor((Math.random()*20)+1); 
    // could by dynamically count available templates, later ... 

    document.getElementById('q1').innerHTML = document.getElementById('template' + question); 
}

来源

2014-02-08 17:52:20

最后<body>标记应该是一个结束标记</body>。其余的代码似乎很好。您可以检查浏览器控制台以查看是否有任何错误。

说明你的代码： -

Math.Random() 20返回介于0（含）和1（不含）你乘以一个随机数（最小为0 ??及上限为19 ??。），然后你加1，然后发表整个表达式。所以，你得到1到20之间的数字。

你的代码工作得很好。检查此链接： -

JS FIDDLE

来源

2014-02-08 17:52:40

IHMO你应该改变的方法。这是我会怎么做，以避免问题重复，避免所有这些if-else声明：

HTML

<div id="q1"></div> 
<div id="q2"></div> 
... 
<div id="q10"></div>

//--- Original question array 
var qArr = [ 
    "Question 1", 
    "Question 2", 
    ... 
    "Question 19", 
    "Question 20" 
]; 

//--- copy of the original array, so you can safely remove questions 
//--- once you use them 
var qArrCopy = qArr.slice(0); 

for(var x = 1; x <= 10; x++){ 
    //--- rnd number between 0 and qArrCopy.length 
    var rnd = Math.floor((Math.random()*qArrCopy.length)); 

    document.getElementById("q"+x).innerHTML = qArrCopy[rnd]; 
    qArrCopy.splice(rnd, 1); 
}

FIDDLE

基本上你创建一个问题阵列，然后你随机选择一个问题以附加到DOM。将问题附加到DOM后，为避免问题重复，请将其从问题数组中移除。通过这种方式，因为你需要原来的数组，你可以添加尽可能多的问题，而不需要改变的JS

其余希望它有助于

来源

2014-02-08 17:54:33 BeNdErR

+1代码写得很好！ –

在JavaScript中使用For循环

回答

相关问题