Javascript:根据用户输入显示随机图像
因此,我正在创建一个锻炼网站作为一种爱好,需要一些关于锻炼创建者方面的帮助。所以我有一个页面,我想根据一个人的限制随机创建一个训练。以下是该部分的网页:。基本上,当一个人选择了他们的训练限制后,他们将单击“创建训练”按钮,然后页面将显示10个不同的训练图片供用户完成。所以我的问题是:当我设置“无限制”并创建训练时,只会显示一张图像,而不是10张。当我把“怀孕”或“低影响”点击“创建锻炼”按钮时,什么都没有发生。谁能看看我的javascript,看看我做错了什么?下面是javascript的代码:Javascript:根据用户输入显示随机图像,javascript,html,css,arrays,image,Javascript,Html,Css,Arrays,Image,因此,我正在创建一个锻炼网站作为一种爱好,需要一些关于锻炼创建者方面的帮助。所以我有一个页面,我想根据一个人的限制随机创建一个训练。以下是该部分的网页:。基本上,当一个人选择了他们的训练限制后,他们将单击“创建训练”按钮,然后页面将显示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)]+'">')
}
}
}
函数createOffice(){
var randomimages=新数组();
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/shunk.gif”
randomimages[9]=“images/office/duck punchs.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-kiets.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=新数组()
对于(n=0;n首先,您必须创建要修改的imgdiv
:
<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=document.write()
与
document.getElementById(“img1”).innerHTML=''
请记住,document.write
不会返回任何内容,因此您无法将其设置为innerHTML
您的代码有很多错误。如前所述,您应该使用分号,如前所述,您需要删除文档。write
函数
不过,我建议采用完全不同的实施方式
您的实现将重用图像,我认为这不是您想要的
以下是一个不会重用图像的函数:
function randoms(many) {
var arr = randomImages,
i;
while (many < (arr.length)) {
arr.splice(Math.floor(Math.random() * (arr.length - 1)), 1);
}
return arr;
}
这里是行动:摆脱你的文档。像@rla4那样写s,也像@eventHandler那样使用分号,但你也应该记住,它们可能会显示相同的图像。所以我这样做了,图像仍然不显示。现在当我单击“创建训练”时,不会发生任何事情,无论我检查了哪些限制document.getElementById(“img1”)正在返回null。您必须先创建img标记,然后再尝试修改它们。此外,我在上次编辑时错误地删除了img标记本身的创建。我确实希望它能够多次显示同一图像。我更改了它,添加了;并删除了document.write,但它仍然不起作用适当地
function randoms(many) {
var arr = randomImages,
i;
while (many < (arr.length)) {
arr.splice(Math.floor(Math.random() * (arr.length - 1)), 1);
}
return arr;
}
randoms(10).forEach(function (img) {
var elem = document.createElement('img');
elem.src = img;
document.getElementById('images').appendChild(elem);
});