The title might sound a bit confusing since I tried to make it as short and simple as possible but this is hard to do since the problem is not that simple. I am currently making a website using notepad++ so i am using javascript css and php.
I want when i press a button, a random number generator picks a number that hasn't been picked before, lets say between 0-10. then it returns image['the random number'] where image[] is my array of images, and displays it in paragraph 1(p1). if i click again, it is going to remove the previous image and put a new one. I have done that.
Now i want to have special images, for example image[3] and image[4] so when the random generator picks 3 or 4, i want it the image to be displayed next to the other images.
Lets simulate a scenario, image[1](not special) is shown. Then image 2(not special) is shown and image 1 is removed. then Image 3(special) is shown next to image 2 without removing it. But then image 5(not special) is shown and it removes image 2(and doesnt remove image3 which is a special image). And if image4(special) is picked, then image 3(special) is removed, the new image5(which wasnt special) stays, and image 4 is displayed next to it. And if it keeps going, it just replaces the non special images with not special ones, and the special ones with only special ones.
Here is my code:
the css part (nothing important, its for styling the button)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
body{
background-image: url("pic3.jpg")
}
.button1{
position: absolute;
top: 60%;
left: 80%;
transform: translate(-50%, -50%);
background: white;
color: #f56c42;
font-size: 22px;
padding: 10px 15px;
border: none;
cursor: pointer;
border-radius: 30px;
text-align: center;
}
</style>
</head>
the php part (initialzing the button and pic 1, which is shown in the beginning and when you press next card its replaced with one of the images in the array images[]
<body>
<h1> <img src="pic4.png" alt="pic4" style="margin: 0px 375px;"> </h1>
<p id="p1" style="text-align: center; border:8px;border-style:solid;padding:2em;border-color:#fc6e00;" >
<img src= "pic1.jpg" alt="pic1" id="pic1" style="margin: 0px 200px; width:850px;height:450px;">
<button id="button3" onclick="f1();" class="button1">Next Card</button>
<img src= "pic2.jpg" alt="pic2" id="pic2"
style="display:none; margin: 0px 200px; width:850px;height:450px;" >
</p>
<p id="p2" style="text-align: center; border:8px;border-style:solid;padding:2em;border-color:white;color: white" > </p>
the javascript part:
<script>
var g=0; //counter how many times the function has been called
var arr=[]; //empty array i fill with the random numbers so i can remove repeated ones
function f1()
{
var theImages = [{ //array with the images
src: "img1.png",
width: "500",
height: "700",
}, {
src: "img2.png",
width: "500",
height: "700",
}, {
src: "img3.png",
width: "500",
height: "700",
}, {
src: "img4.png",
width: "500",
height: "700",
},
{
src: "img5.png",
width: "500",
height: "700",
}, {
src: "img6.png",
width: "500",
height: "700",
}, {
src: "img7.png",
width: "500",
height: "700",
}, {
src: "img8.png",
width: "500",
height: "700",
}];
var endCard=[{
<!-- array for the end card,
i know this is not needed but this is how it worked so
i saved some headaches for me -->
src: "img0.png",
width: "500",
height: "700",
}];
var endcardbuffer= [];
<!--end card buffer ( im not sure i need a buffer but
it works so i dont touch it, i had some problems that said
"not an object" so with this i dont have that -->
endcardbuffer[0] = new Image();
endcardbuffer[0].src = endCard[0].src;
endcardbuffer[0].width = endCard[0].width;
endcardbuffer[0].height = endCard[0].height;
var i;
var preBuffer = [];
for (i = 0;i< theImages.length;i++) { //sets up the images in preBuffer
preBuffer[i] = new Image();
preBuffer[i].src = theImages[i].src;
preBuffer[i].width = theImages[i].width;
preBuffer[i].height = theImages[i].height;
}
function getRandomInt() { //returns an image(preBuffer['random num'] or the endcard
g++; //everything except the imn=math... line is for the removal of repeated numbers
var j=0;
var a;
while(j>=0)
{
imn = Math.floor(Math.random() * (0 - preBuffer.length )) + preBuffer.length;
a = imn;
arr[g-1]=a;
j=0;
for(i=0;i<theImages.length;i++)
{
if(arr[i] === a)
{j++;}
}
if(g>theImages.length)
{ return endcardbuffer[0]; }
if(j<2)
break;
}
return preBuffer[imn];
}
var newImage=getRandomInt();
var images = document.getElementsByTagName('img');
var l = images.length;
for (i = 0; i < l; i++) { // remove the previous images
images[0].parentNode.removeChild(images[0]);
}
document.getElementById("p1").appendChild(newImage); // display the image
}
}
</script>
</body>
</html>
this is my code. right now, it shows up to 8 images, when the last image is shown every time you press the button it will give you the endcard.
what i have tried: in getRandomInt() i added this line
if (a==3 || a==4)
{
return 0;
}
which will return me 0 if its a special number
all of this below is added after the getRandomInt() {} function
var x=getRandomInt();
var newImage;
if(x==0){
if(g%2==0)
<!-- this is not perfect and i want to have more than 2 special images,
with this approach i can only have 2 (when my counter is even and when its odd),
i can figure this out but i dont know how to not remove the old image,
which is my problem so if it works with 2 i will figure out how to work with more) -->
{newImage = preBuffer[3];}
else{newImage=preBuffer[4];}
var images = document.getElementsByTagName('img');
var l = images.length;
document.getElementById("p2").appendChild(newImage); // display the image
}
else{
newImage=x;
var images = document.getElementsByTagName('img');
var l = images.length;
for (i = 0; i < l; i++) { // remove the previous images
images[0].parentNode.removeChild(images[0]);
}
document.getElementById("p1").appendChild(newImage); // display the image
}
}
the problem i believe is with the appendChild. I am removing the special images as well when i press the button. i have tried a few other versions changing some stuff but most of them said "not an object " when it returned the special image.
I would be glad if someone can help. Regards!
Aucun commentaire:
Enregistrer un commentaire