I've tried to fix this problem for the past 1 hour without success. Basically, once I reach "imageB", I have to click 1 extra time before the image resets back to "imageA". I don't understand why this is happening. Any assistance will be greatly appreciated:
HTML:
<body>
<div class="main-container">
<div class="image-div">
<img width="500px" id="image-holder" src="images/imageA.jpeg" alt="" />
</div>
<button onclick="nextImage()">Next</button>
</div>
<script src="index.js"></script>
</body>
JS:
let imageHolder = document.getElementById("image-holder");
let images = ["images/imageA.jpeg", "images/imageB.jpeg"];
let i = 1;
function nextImage() {
if (i < images.length) {
imageHolder.setAttribute("src", images[i]);
i++;
} else {
i = 0;
}
}
I made a code which can solve your problem, but I think it's a little long, maybe you can find a code more readable on more short than my, anyway here is my solution and it works for me:
everytime when you click in the button, the function give the next item in the array (next source), but if the item is in the end of the array he start again by the first item in the array.
<div class="main-container">
<div class="image-div">
<img width="500px" id="image-holder" src="./img1.png" alt="" />
</div>
<button onclick="nextImage()">Next</button>
</div>
let imageHolder = document.getElementById("image-holder");
let images = ["./img1.png", "./oz.png","./img2.png"];
function nextImage() {
let getSrcAttr = imageHolder.getAttribute("src");
let newSrc =
imageHolder.setAttribute("src",images[(images.indexOf(getSrcAttr))+1]);
if(images.indexOf(getSrcAttr) == (images.length)-1){
newSrc = imageHolder.setAttribute("src",images[0]);
}
}
Related
Forgive me, it's been a while since figuring out anything with jQuery, I need some guidance/help: I'd love to swap an image 00x-a for 00x-b, but not just for a single image, but for many. Once the BTN below an IMG is clicked, I'd love to swap the IMG above for 00x-b while resetting other IMGs to 00x-a.
<div>
<img id="swap_this" src="img-001-a.jpg">
<a class="button">Change-IMG</a>
</div>
<div>
<img id="swap_this" src="img-002-a.jpg">
<a class="button">Change-IMG</a>
</div>
<div>
<img id="swap_this" src="img-003-a.jpg">
<a class="button">Change-IMG</a>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".button").click(function(){
$("#swap_this").attr()({
"src":"img-001-b.jpg";
})
})
});
</script>
This should do it. Only the first picture is set to img-001-a.jpg
var arr = ['img-001-a.jpg', 'img-002-a.jpg', 'img-003-a.jpg']
$.each($('.swap_this'), function(index, value) {
if(index == 0) {
$(this).attr('src', arr[0])
console.log($(this).attr('src'));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<img class="swap_this" src="img-001-b.jpg">
<a class="button">Change-IMG</a>
</div>
<div>
<img class="swap_this" src="img-002-b.jpg">
<a class="button">Change-IMG</a>
</div>
<div>
<img class="swap_this" src="img-003-b.jpg">
<a class="button">Change-IMG</a>
</div>
Tried to follow up on your answer, but ended up with something else. The below does what I need, but can it be written with "each" or using a for-loop to iterate through? Thx.
// clicking btn_100
$('.btn_100').click(function(e) {
// reset all IMG to version -a.gif..
$(".img_100").attr('src','img-100-a.gif');
$(".img_099").attr('src','img-099-a.gif');
$(".img_098").attr('src','img-098-a.gif');
// set IMG_100 ver -b.gif..
$(".img_100").attr('src','img-100-b.gif');
});
// clicking btn_099
$('.btn_099').click(function(e) {
// reset all IMG to version -a.gif..
$(".img_100").attr('src','img-100-a.gif');
$(".img_099").attr('src','img-099-a.gif');
$(".img_098").attr('src','img-098-a.gif');
// set IMG_100 ver -b.gif..
$(".img_099").attr('src','img-099-b.gif');
});
// and so on..
Maybe this could work…
for(a=1; a<=100; a++) {
// create fns for all btns
$(".btn_" + a).click(function(e) {
// reset all IMG to version -a.gif..
for(i=1; i<=100; i++) {
$(".img_" + i).attr("src","image-" + i + "-a.gif");
}
// set specific IMG to version -b.gif..
$(".img_" + a).attr("src","image-" + a + "-b.gif");
});
}
this is my code:
I want to change the img src by clicking on the button and add one to the counter that change the next photo again But only the first photo is displayed !
and
I have 8 img in this path : images/slides/writing${0-7};
slider = () =>{
let i=0;
let slides = document.getElementById('slides').getElementsByTagName('img')[0];
slides.src = `images/slides/writing${i}.jpg` ;
i++
}
<section id="slides">
<picture>
<img src="" alt="Slide img">
<input type="button" value="change" onclick="slider()">
</picture>
</section>
You are always setting i to 0 inside the function, just make it global and make sure it doesn't exceed 7:
let i=0;
slider = () =>{
if(i==8) i=0;
let slides = document.getElementById('slides').getElementsByTagName('img')[0];
slides.src = `images/slides/writing${i}.jpg` ;
i++
}
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I am trying to make it so that every time that I click on the button that I created it cycles through the photos. Right now it won't do anything that I want
I think that a for loop would be the best way to go about this but I don't know what I am doing
var images = ["img/profile.jpg", "img/mountain.jpg", "img/sanfran.jpg"];
function loadPage() {
document.getElementById("pictures").src = images[0];
}
function nextImage() {
if (document.getElementById("pictures").src = images[0]) {
document.getElementById("pictures").src = images[1];
} else if (document.getElementById("pictures").src = images[1]) {
document.getElementById("pictures").src = images[2];
} else(document.getElementById("pictures").src = images[2]) {
document.getElementById("pictures").src = images[0];
}
}
<body onclick="loadPage()">
<div id="maincontent">
<div>
<img id="pictures">
</div>
<div id="paragraph">
<button class="button" onclick="nextImage()">Switch Images</button>
</div>
</div>
</body>
While Jet is on the right track. It will stop working after the last image, as index will be out of bounds.
EDIT Jet has updated their code, and the way of keeping index in bounds is quite elegant.
See the below example:
<body>
<div id="maincontent">
<div>
<img id="pictures">
</div>
<div id="paragraph">
<button class="button" onclick="nextImage()">Switch Images</button>
</div>
</div>
<script>
var images = [
"https://via.placeholder.com/150x150.png?text=1",
"https://via.placeholder.com/150x150.png?text=2",
"https://via.placeholder.com/150x150.png?text=3"
];
let currentImage = -1;
function nextImage() {
currentImage++; // Add 1 to the currentImage variable
if (currentImage === images.length) {
currentImage = 0; // If we've reached the last image, go to the first image
}
document.getElementById("pictures").src = images[currentImage]; // Set the src image to the current image in our images array
}
nextImage();
</script>
</body>
Bascially i cycle through the names of images stored in the array. i used the modulo (%) to ensure that i wont go out of bound of the array
<body>
<div id="maincontent">
<div>
<img src="img/profile.jpg" id="pictures">
</div>
<div id="paragraph">
<button class="button" onclick="nextImage()">Switch Images</button>
</div>
</div>
<script type="text/javascript">
var index = 1;
var images = ["img/profile.jpg", "img/mountain.jpg", "img/sanfran.jpg"];
function nextImage(){
document.getElementById('pictures').src = images[index%3];
index++;
}
</script>
</body>
var images = ["https://via.placeholder.com/150", "https://via.placeholder.com/500",];
var imageElement = document.getElementById("pictures");
function loadPage() {
imageElement.src = images[0];
}
function nextImage() {
if(imageElement.src == images[0])
imageElement.src = images[1];
else if (imageElement.src == images[1])
imageElement.src = images[2];
else if (imageElement.src == images[2])
imageElement.src = images[0];
}
<body onclick="loadPage()">
<div id="maincontent">
<div>
<img id="pictures">
</div>
<div id="paragraph">
<button class="button" onclick="nextImage()">Switch Images</button>
</div>
</div>
</body>
The issue was simple, inside IF conditions use ==
== is for comparison, = is for assignment
P.S instead of calling document.getElementById repeadetly to get the same element, you can also store the element's reference once in a variable and use it, to increase performance
== is used for conditions, and = is used for assignment. However, I would advise using a switch in this case instead of an if statement as below:
<body onclick="loadPage()">
<div id="maincontent">
<div>
<img id="pictures">
</div>
<div id="paragraph">
<button class="button" onclick="nextImage()">Switch Images</button>
</div>
</div>
<script>
let images = ["img/profile.jpg", "img/mountain.jpg", "img/sanfran.jpg"];
let src = document.getElementById("pictures").src
function loadPage() {
src = images[0];
}
function nextImage() {
switch (document.getElementById("pictures").src) {
case images[0]:
src = images[1];
break
case images[1]:
src = images[2];
break
case images[2]:
src = images[0];
break
}
}
</script>
</body>
EDIT: It seems others have come up with an even more efficient way to do this, but I'll leave it here as a reference to an alternative.
I've been trying for the past hours to create a Comic Book online reader to allow my images to load up.
Everything works fine but I use a counter using a increment method basically and it just doesn't work because bringing down the increments breaks the function.
Maybe there is a simpler way? Also jQuery is the most obscure language to learn unlike HTML or PHP, jQuery has a documentation that pretty much has no organization. Its like here's all the stuff now read each one and maybe you'll find yours. My code is below
<script>
$(function manga () {
var count = 0;
var images = ["source_images/01.jpg", "source_images/02.jpg", "source_images/03.jpg", "source_images/04.jpg", "source_images/05.jpg", "source_images/06.jpg", "source_images/07.jpg"];
$("#left").click(function () {
var img = images[count % images.length];
++count;
$("#manga").attr("src", img);
//alert("clicked");
manga();
});
$("#right").click(function () {
var img = images[count % images.length];
--count;
$("#manga").attr("src", img);
//alert("clicked");
manga();
});
manga();
});
</script>
<title></title>
<center>
<img id="left" style="width:10%; float:left; padding:1.3%" src="files/left_arrow.png" />
<div >
<img id="manga" style="width:75%; float:left" src="source_images/00.jpg" />
</div>
<img id="right" style="width:10%; float:left; padding:1.2%" src="files/right_arrow.png" />
</center>
Basically your calling your function manga 3 times
first when it loads
second when your do left click
and third when you do right click
In this your initializing counter to keep track of the images and everytime
your calling function again your initializing it to 0
so your count again starting from 0.
So to avoid it make your count variable global declare it outside the manga() function.
checkout this code
<script>
var count = 0;
$(function manga () {
var images = ["source_images/01.jpg", "source_images/02.jpg", "source_images/03.jpg", "source_images/04.jpg", "source_images/05.jpg", "source_images/06.jpg", "source_images/07.jpg"];
$("#left").click(function () {
++count;
var img = images[count % images.length];
alert(img);
$("#manga").attr("src", img);
//alert("clicked");
manga();
});
$("#right").click(function () {
if(count == 0)
{
count = images.length-1;
}
else {
--count;
}
var img = images[count % images.length];
alert(img);
$("#manga").attr("src", img);
//alert("clicked");
manga();
});
manga();
});
</head>
<body>
<center>
<center>
<img id="left" style="width:10%; float:left; padding:1.3%" src="files/left_arrow.png" />
<div >
<img id="manga" style="width:75%; float:left" src="source_images/00.jpg" />
</div>
<img id="right" style="width:10%; float:left; padding:1.2%" src="files/right_arrow.png" />
</center>
</center>
I changed the position of count variable in both left and right click. And added one if condition in left click so that when the page loads first time and if user click left arrow first it will show last image.
so image src will move from first to last.It will work.
Using Javascript, I want to toggle on and off between 2 images.
So far I am using a counter and then changing my innerHTML based off if the counter is even or odd for when the image is clicked
It works the first time i click the image by replacing the image already there, but after the first time it keeps on adding images instead.
How can i make it change the image after the second time rather than add images when I click?
<!DOCTYPE html>
<html>
<head>
<script>
var x = 0;
function myFunction() {
x++;
var div1 = document.getElementById('div1');
if (x % 2 != 0) {
var y = document.write('<img src="http://www.computric.com/wp-content/uploads/2011/09/119709197585381818TzeenieWheenie_Power_On_Off_Switch_red_2.svg_.med_.ng" alt="sometext" onclick=myFunction()>');
div1.appendChild.innerHtml = y;
} else if (x % 2 == 0) {
var y = document.write('<img src="http://0.tqn.com/d/pcsupport/1/0/Y/A/-/-/on.jpg" alt="some_text" onclick=myFunction()>')
div1.appendChild.innerHTML = y;
}
}
</script>
</head>
<body>
<div id="div1" style="font-size:12px" onclick=myFunction()> <span onclick=myFunction()>
<img src="http://0.tqn.com/d/pcsupport/1/0/Y/A/-/-/on.jpg" alt="some_text">
</span>
</div>
</body>
</html>
If you are only trying to achieve the toggle effect something like this should work:
<!DOCTYPE html>
<html>
<head>
<script>
var x=0;
function myFunction(){
var div1=document.getElementById('div1');
if(x==0){
x=1;
document.getElementById("myimgid").src = "http://www.computric.com/wp-content/uploads/2011/09/119709197585381818TzeenieWheenie_Power_On_Off_Switch_red_2.svg_.med_.ng";
}
else{
x=0;
document.getElementById("myimgid").src = "http://0.tqn.com/d/pcsupport/1/0/Y/A/-/-/on.jpg";
}
}
</script>
</head>
<body>
<div id="div1" style="font-size:12px" onclick=myFunction()>
<span>
<img id="myimgid" src="http://0.tqn.com/d/pcsupport/1/0/Y/A/-/-/on.jpg" alt="some_text">
</span>
</div>
</body>
</html>