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

Question

因此，我将创建一个锻炼网站作为一种爱好，并且在锻炼创建者方面需要一些帮助。所以我有一个页面，我想根据一个人的限制随机创建一个锻炼。这是该部分的网页:random workout creator .基本上，当一个人选择了他们的锻炼限制后，他们会点击“创建锻炼”按钮，然后页面会显示 10 张不同的锻炼图片供用户完成。所以这是我的问题:当我输入“无限制”并创建锻炼时，只显示一张图像，而不是 10 张。当我输入“怀孕”或“低影响”时，单击“创建锻炼”按钮，没有任何反应.谁能看看我的 javascript，看看我做错了什么？这是 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

首先，您必须创建要修改的 img divs:

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

然后，替换每一行

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

与

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

请记住，document.write 不会返回任何内容，因此您不能将其设置为您的 innerHTML。