Using For Loop in JavaScript

I'm making a 10 question quiz with Javascript. I have 20 questions, and my goal is to make 10 of them randomly appear. Here's a sample code of what I'm trying to do, but something's not right. Please tell me if you find my mistake.

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

Answers


This code would be much more manageable with the questions placed in an array. Then simply iterate 10 times and grab the random questions:

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 Fiddle: http://jsfiddle.net/2sY7T/2/


IHMO you should change the approach. This is how I would do it, to avoid question repetitions and to avoid all those if-else statements:

HTML

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

JS

//--- 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

Basically you create an array of question, and you randomly select one question to append to the DOM. Once you append the question to the DOM, to avoid question duplication, you remove it from the question array. This way you can add as many question as you need to the original array, without the need to change the rest of the JS

hope it helps


More generic:

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);
}

The last <body> tag should be a closing one </body>. Rest of the code seems fine. You can check the browser console to see if there is any error.

Explanation of your code:-

Math.Random() returns a random number between 0 (inclusive) and 1 (exclusive) and you are multiplying it by 20(min is 0.?? and max is 19.??) and then you are adding 1 to it and then taking the floor of whole expression. So, you are getting a number between 1 and 20.

Your code works absolutely fine. Check this link:-

JS FIDDLE


Need Your Help

Anyone using DynamoDB and Hive without using EMR?

hadoop amazon-dynamodb elastic-map-reduce

I was reading the below integration of using Hive for querying data on DynamoDB.

How can I get the coordinates of any given address using CoreLocation framework and not google Maps API?

iphone gps coordinates google-maps core-location

I'm interested in finding out the coordinates of "any" given address and not just the current location using only CoreLocation.Framework. I do not wish to use google maps API or yahoo maps or any o...