Javascript：根据用户输入显示随机图像

Question

So I am creating a workout website as a hobby and need some help on the workout creator aspect. So I have a page where I want to randomly create a workout based on the restrictions a person has. Here is the webpage for that part: random workout creator . Basically, after a person chooses their restrictions for the workout, they will click the "create workout" button, and then the page will display 10 different pictures of exercises for the user to complete. So here is my problem: When I put "No restrictions" and create the workout, only one image shows up, not 10. And when I put either "pregnant" or "low impact" click the "create workout" button, nothing happens. Can anyone look at my javascript and see what I am doing wrong? Here is the code for the javascript:

function createOffice(){
var randomimages=new Array();

randomimages[0]="images/office/arm circles.gif"
randomimages[1]="images/office/calf raises.gif"
randomimages[2]="images/office/chair step ups.gif"
randomimages[3]="images/office/curtsy lunge.gif"
randomimages[4]="images/office/desk pushups.gif"
randomimages[5]="images/office/lunge2.gif"
randomimages[6]="images/office/Lunges.gif"
randomimages[7]="images/office/side lunge.gif"
randomimages[8]="images/office/Squat.gif"
randomimages[9]="images/office/squat punches.gif"
randomimages[10]="images/office/Step up with knee up.gif"
randomimages[11]="images/office/tricep dips.gif"
randomimages[12]="images/office/Butt Kickers.gif"
randomimages[13]="images/office/high knees.gif"
randomimages[14]="images/office/jogging in place.gif"
randomimages[15]="images/office/jumping butt kicks.gif"
randomimages[16]="images/office/jumping jacks.gif"
randomimages[17]="images/office/jumping rope.gif"
randomimages[18]="images/office/Star Jumps.gif"
randomimages[19]="images/office/wall jump touch.gif"

var preload=new Array()

for (n=0;n<randomimages.length;n++){
    preload[n]=new Image()
    preload[n].src=randomimages[n]
}

if(document.getElementById("impact").checked == false && document.getElementById("pregnant").checked == false && document.getElementById("none").checked == false){
    document.getElementById("error").innerHTML = "*All fields are required";
}
else{
    if(document.getElementById("pregnant").checked == true || document.getElementById("impact").checked == true){
        document.getElementById("img1").innerHTML = document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*12)]+'">')
        document.getElementById("img2").innerHTML = document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*12)]+'">')
        document.getElementById("img3").innerHTML = document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*12)]+'">')
        document.getElementById("img4").innerHTML = document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*12)]+'">')
        document.getElementById("img5").innerHTML = document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*12)]+'">')
        document.getElementById("img6").innerHTML = document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*12)]+'">')
        document.getElementById("img7").innerHTML = document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*12)]+'">')
        document.getElementById("img8").innerHTML = document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*12)]+'">')
        document.getElementById("img9").innerHTML = document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*12)]+'">')
        document.getElementById("img10").innerHTML = document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*12)]+'">')       
    }
    else{
        document.getElementById("img1").innerHTML = document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*20)]+'">')
        document.getElementById("img2").innerHTML = document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*20)]+'">')
        document.getElementById("img3").innerHTML = document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*20)]+'">')
        document.getElementById("img4").innerHTML = document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*20)]+'">')
        document.getElementById("img5").innerHTML = document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*20)]+'">')
        document.getElementById("img6").innerHTML = document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*20)]+'">')
        document.getElementById("img7").innerHTML = document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*20)]+'">')
        document.getElementById("img8").innerHTML = document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*20)]+'">')
        document.getElementById("img9").innerHTML = document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*20)]+'">')
        document.getElementById("img10").innerHTML = document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*20)]+'">')       
    }
}
}

Answer 1

First you have to create the img divs you are trying to modify:

<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>
<div id="img4"></div>
<div id="img5"></div>
<div id="img6"></div>
<div id="img7"></div>
<div id="img8"></div>
<div id="img9"></div>
<div id="img10"></div>

Then, replace each of these lines

document.getElementById("img1").innerHTML = document.write(<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*12)]+'">)

with

document.getElementById("img1").innerHTML = '<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*12)]+'">' 

Keep in mind that document.write does not return anything, so you cannot set it to your innerHTML .

Answer 2

There are quite a few things wrong with your code. like eventHandler said, you should have semicolons, and like rla4 said you need to remove the document.write function.

I suggest an entirely different implentation however.

Your implementation will reuse images, which I don't think you want.

Here is a function that won't reuse images:

function randoms(many) {
    var arr = randomImages,
        i;
    while (many < (arr.length)) {
        arr.splice(Math.floor(Math.random() * (arr.length - 1)), 1);
    }
    return arr;
}

Then you can add it to your page:

randoms(10).forEach(function (img) {
    var elem = document.createElement('img');
    elem.src = img;
    document.getElementById('images').appendChild(elem);
});

Here it is in action: JSFiddle for Random Images