We Keep Coding

Remove one image after another when onclick

i have a div that contains 5 of the same image. i'm trying to make a button that can make one of the images disappear one after another when onclick. i've tried the style.visibility but it makes them all disappear together. This is my code
document.getElementById("btn1").onclick = function() {
document.getElementById("output").style.visibility = "hidden";
}
<input id="btn1" type="button" value="Click me" onclick="onClick1()" style="height: 100px; width: 100px;">
<div style="margin-top: 40px;"></div>
<div id="output">
<img src="/images/person1.jpg">
<img src="/images/person1.jpg">
<img src="/images/person1.jpg">
<img src="/images/person1.jpg">
<img src="/images/person1.jpg">
</div>

You are targeting the image container and then hiding it so all the images disappear at once.
It's not really clear from your question whether you want to click the button once and have the images disappear, or to click the button repeatedly and have one image disappear on each click. This solution answers the first problem.
If you want to hide the images one-by-one you're going to need to use setInterval or setTimeout to manage that. In this example I've used setTimeout.
document.getElementById('btn1').onclick = function() {
// Get all the images
const images = Array.from(document.querySelectorAll('#output img'));
// Loop over the images
function loop(images) {
// If there are images left remove the first one,
// hide it, and then call the function again with the
// reduced image array until all images are gone.
if (images.length) {
const image = images.shift();
image.style.visibility = 'hidden';
setTimeout(loop, 1000, images);
}
}
loop(images);
}
<input id="btn1" type="button" value="Click me" onclick="onClick1()" style="height: 100px; width: 100px;">
<div style="margin-top: 40px;"></div>
<div id="output">
<img src="https://dummyimage.com/30x30/000/fff">
<img src="https://dummyimage.com/30x30/000/fff">
<img src="https://dummyimage.com/30x30/000/fff">
<img src="https://dummyimage.com/30x30/000/fff">
<img src="https://dummyimage.com/30x30/000/fff">
<img src="https://dummyimage.com/30x30/000/fff">
</div>
Additional documentation
shift
setTimeout
Array.from
If you want to make the images disappear on each click, cache the images, and return a function that the listener calls when you click the button.
const button = document.getElementById('btn1')
button.addEventListener('click', handleClick(), false);
// Cache the image elements, and then return a new
// function to your listener that removes an image on each click
function handleClick() {
const images = Array.from(document.querySelectorAll('#output img'));
return function() {
if (images.length) {
const image = images.shift();
image.style.visibility = 'hidden';
}
}
}
<input id="btn1" type="button" value="Click me" style="height: 100px; width: 100px;">
<div style="margin-top: 40px;"></div>
<div id="output">
<img src="https://dummyimage.com/30x30/000/fff">
<img src="https://dummyimage.com/30x30/000/fff">
<img src="https://dummyimage.com/30x30/000/fff">
<img src="https://dummyimage.com/30x30/000/fff">
<img src="https://dummyimage.com/30x30/000/fff">
<img src="https://dummyimage.com/30x30/000/fff">
</div>

You should give id's to image tag instead of parent div.
Created variable which which will work as a counter.
On each click increase counter and hide the specific image tag.
Your code will look like:
let imageToDelete = 1;
document.getElementById("btn1").onclick = function() {
document.getElementById("image_" + imageToDelete).style.visibility = "hidden";
imageToDelete++;
}
<input id="btn1" type="button" value="Click me" onclick="onClick1()" style="height: 100px; width: 100px;">
<div style="margin-top: 40px;"></div>
<div>
<img id="image_1" src="/images/person1.jpg">
<img id="image_2" src="/images/person1.jpg">
<img id="image_3" src="/images/person1.jpg">
<img id="image_4" src="/images/person1.jpg">
<img id="image_5" src="/images/person1.jpg">
</div>

With that script, all you are doing is hiding the parent of all the images, which results in all the images "seemingly disappearing" at once. You have to remove each separately to achieve your desired result.
const RemoveImage = Event => {
const Target = Event.target;
const ImgPos = Target.getAttribute("data-remove");
const Selector = `#image-parent > img:${ImgPos}-of-type`;
const ImgToRemove = document.querySelector(Selector);
if(!ImgToRemove) return false;
ImgToRemove.parentElement.removeChild(ImgToRemove);
return true;
};
const Buttons = document.querySelectorAll("button[data-remove]");
Buttons.forEach(btn => btn.addEventListener("click", RemoveImage));
#image-parent > img:hover {
filter: brightness(92%);
}
#first {outline: 2px solid #a00;}
#last {outline: 2px solid #0a0;}
<div id="image-parent">
<img src="https://via.placeholder.com/70" id="first">
<img src="https://via.placeholder.com/70">
<img src="https://via.placeholder.com/70">
<img src="https://via.placeholder.com/70" id="last">
</div>
<button data-remove="first">Remove first img</button>
<button data-remove="last">Remove last img</button>
If you don't want the images to be removed fully, but rather just hidden:
Rreplce the line ImgToRemove.parentElement.removeChild(ImgToRemove); with something like ImgToRemove.classList.add("hidden-by-css");
Then declare this CSS class with opacity: 0; pointer-events: none;.

We know manipulating HTML DOM is not popular option. But this will work with your problem.
document.getElementById("btn1").onclick = function() {
let imageNode = document.getElementById("output").getElementsByTagName('img')[0];
imageNode.parentNode.removeChild(imageNode)
}

I have found that using the queue() and dequeue() methods from jQuery library is a very good option for resolving this step by step scenarios. This is the stated description of this in the official page:
"Queues allow a sequence of actions to be called on an element asynchronously, without halting program execution. "
I will leave an brief example of how I have implemented it in the past:
$('#anchoredToElement')
.queue("steps", function (next) {
console.log("Step 1");
//In case you want to hold the execution for a bit depending on the scenario you're running
setTimeout(function () { console.log("Action within timeout") }, 500);
next();
})
.queue("steps", function (next) {
console.log("Step 2");
setTimeout(function () {
//Execution example
UploadFile(fileUpload))
}, 500);
next();
})
.dequeue("steps");
Here an example of how I think the logic could be for your needs:
var removeImage = function (index) {
//Logic here to remove image within div according to passed index
};
var index = 0;
$('#output')
.queue("steps", function (next) {
console.log("Remove Image 1");
setTimeout(function () { removeImage(index); }, 250);
index++;
next();
})
.queue("steps", function (next) {
console.log("Remove Image 2");
setTimeout(function () { removeImage(index); }, 250);
index++;
next();
})
.queue("steps", function (next) {
console.log("Remove Image 3");
setTimeout(function () { removeImage(index); }, 250);
index++;
next();
})
.queue("steps", function (next) {
console.log("Remove Image 4");
setTimeout(function () { removeImage(index); }, 250);
index++;
next();
})
.queue("steps", function (next) {
console.log("Remove Image 5");
setTimeout(function () { removeImage(index); }, 250);
index++;
next();
})
.dequeue("steps");
Of course you can improve the JS code as I was just focusing on the step by step process.
This is just a first glance of how $.queue can help you to achieve the step by step process. I recommend to go check the documentation to learn the details and so apply it to your logic as needed.

Image slider requiring 1 extra click to reset. Unable to fix

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]);
}
}

Displaying an image after clicking 100 times on a button

I'm new here and I still have some difficulties in coding.
I'm trying to create an html page for some friends and I managed to create a click counter, an image which appear and disapear after some time etc
However the only thing that I can't manage to do is how I can make an image appear after clicking on the button for 100 or 1000 times. I can make the image appear after clicking on the button one time, but I don't know how to make it appear only after some clicking.
If someone can help me I'll be very glad!
$button = document.querySelector('button')
$span = document.querySelector('span')
function increment() {
$span.innerHTML++;
}
$button.addEventListener('click', increment);
document.addEventListener("DOMContentLoaded", function() {
setTimeout(function() {
showImage();
setInterval(hideImage, 8000);
}, 5000);
});
function hideImage() {
document.getElementById("imgHideShow").style.display = "none";
}
function showImage() {
document.getElementById("imgHideShow").style.display = "block";
}
<img class="prayme" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Tram_icon_black_and_transparent_background.svg/1024px-Tram_icon_black_and_transparent_background.svg.png">
<p>You prayed <span id='count'>0</span> times</p>
<div id="image">
<img src="https://pbs.twimg.com/profile_images/998926585691451392/WlkEVV7x_400x400.jpg">
</div>
<div class="text-center">
<button><img class="imgbutton" src="https://www.nicepng.com/png/detail/980-9803933_emoji-emoji-pray-thankyou-thanks-praying-hands-emoji.png">
Afficher l'image
</button>
</div>
<div>
<img src="https://i.stack.imgur.com/1dpmw.gif" class="browse-tip" id="imgHideShow">
</div>

You just need to add an if statement, checking if the innerHTML is more or equal to 100, and then call showImage().
I removed code that wasn't relevant.
I added declarations to the variables by adding let in front the name.
I removed the button, and put an event listener directly on the image instead.
I think the rest of the code is self-explanatory.
let spanElement = document.querySelector('span');
let imgButton = document.getElementById('imgbutton');
function increment() {
spanElement.innerHTML++;
if (spanElement.innerHTML >= 5) {
showImage();
}
}
imgButton.addEventListener('click', increment);
document.addEventListener("DOMContentLoaded", function() {
setInterval(hideImage, 8000);
});
function hideImage() {
document.getElementById("imgHideShow").style.display = "none";
}
function showImage() {
document.getElementById("imgHideShow").style.display = "block";
}
img {
height: 3rem;
}
#imgHideShow.hidden {
display: none;
}
<img class="prayme" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Tram_icon_black_and_transparent_background.svg/1024px-Tram_icon_black_and_transparent_background.svg.png">
<p>You prayed <span id='count'>0</span> times</p>
<div class="text-center">
<img id="imgbutton" src="https://www.nicepng.com/png/detail/980-9803933_emoji-emoji-pray-thankyou-thanks-praying-hands-emoji.png">
Afficher l'image
</div>
<div>
<img src="https://i.stack.imgur.com/1dpmw.gif" class="hidden browse-tip" id="imgHideShow">
</div>
To make the code even more readable, I would also add the following it it like this:
Add a constant for how many times the user need to click.
Declare variables for all the elements that are affected.
Use a class (.hidden) to hide the image, and add/remove that class, instead of adding a style. You should only add a style if you can't toggle classes.
const TARGET_TO_SHOW_IMAGE = 5;
let spanElement = document.querySelector('span');
let imgButton = document.getElementById('imgbutton');
let imgHideShow = document.getElementById("imgHideShow");
let numberOfTimesClicked = 0;
function increment() {
numberOfTimesClicked++;
if (numberOfTimesClicked >= TARGET_TO_SHOW_IMAGE) {
showImage();
numberOfTimesClicked = 0; // resets
}
spanElement.innerHTML = numberOfTimesClicked;
}
imgButton.addEventListener('click', increment);
document.addEventListener("DOMContentLoaded", function() {
setInterval(hideImage, 8000);
});
function hideImage() {
imgHideShow.classList.add('hidden');
}
function showImage() {
imgHideShow.classList.remove('hidden');
}
img {
height: 3rem;
}
#imgHideShow.hidden {
display: none;
}
<img class="prayme" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Tram_icon_black_and_transparent_background.svg/1024px-Tram_icon_black_and_transparent_background.svg.png">
<p>You prayed <span id='count'>0</span> times</p>
<div class="text-center">
<img id="imgbutton" src="https://www.nicepng.com/png/detail/980-9803933_emoji-emoji-pray-thankyou-thanks-praying-hands-emoji.png">
Afficher l'image
</div>
<div>
<img src="https://i.stack.imgur.com/1dpmw.gif" class="hidden browse-tip" id="imgHideShow">
</div>

How to stop my images loading before the javascript slideshow loads?

I am new to this and have a quick question. I have a very simple slideshow on my home page. The problem I am having is the first second or so of loading the page, the slideshow images show up 1 on top of the other. Once the first second or so of loading the page is over, everything works fine. Here is my code for the javascript:
<script type="text/javascript" language="javascript">
window.onload = function () {
var rotator = document.getElementById("slideshow_content");
var images = rotator.getElementsByTagName("img");
for (var i = 1; i < images.length; i++) {
images[i].style.display = "none";
}
var counter = 1;
setInterval(function () {
for (var i = 0; i < images.length; i++) {
images[i].style.display = "none";
}
images[counter].style.display = "block";
counter++;
if (counter == images.length) {
counter = 0;
}
}, 3000);
};
</script>
Here is the body code:
<div id="slideshow">
<div id="slideshow_content" style="padding-top:10px; padding-bottom:10px;">
<img alt="" src="/images/slide1.jpg" />
<img alt="" src="/images/slide2.jpg" />
</div>
</div>
Here is the CSS for the 2 divs:
#slideshow {position:relative; top:0; left:0; max-width:1680px; height:342px; margin:0 auto; padding:0; background-color:#070707;}
#slideshow_content {width:960px; max-height:322px; margin:0 auto; padding:0;}
How would you recommend fixing this?

I would set the CSS to hide the slideshow on page load, and then when the slideshow starts it could be unhidden.
This would also mean that if someone had javascript disabled they wouldn't get a weird looking pile of images.
Alternatively you could hide all but the first image using CSS, so that even if someone had javascript disabled they would see the first image.

Change an image with onclick()

I want to change an image to some other image when i click on the object. the code is stacked in the following order:
<li><img><some text></img></li>
<li><img><some text></img></li>
<li><img><some text></img></li>
<li><img><some text></img></li>
<li><img><some text></img></li>
What I wish to do is, when I click on the <li> i want to change the image to a coloured version of the image, i.e. some other image. Now, I know I can use JQuery/JS to accomplish it. But I don't want a huge amount of JS code to accomplish something so simple.
Can it be done using something simpler? Like pseudo selectors? .active class?
I cannot seem to think of it.

To change image onclik with javascript you need to have image with id:
<p>
<img alt="" src="http://www.userinterfaceicons.com/80x80/minimize.png"
style="height: 85px; width: 198px" id="imgClickAndChange" onclick="changeImage()"/>
</p>
Then you could call the javascript function when the image is clicked:
function changeImage() {
if (document.getElementById("imgClickAndChange").src == "http://www.userinterfaceicons.com/80x80/minimize.png"){
document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/maximize.png";
} else {
document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/minimize.png";
}
}
This code will set the image to maximize.png if the current img.src is set to minimize.png and vice versa.
For more details visit:
Change image onclick with javascript link

Or maybe
and that is prob it
<img src="path" onclick="this.src='path'">

How about this? It doesn't require so much coding.
$(".plus").click(function(){
$(this).toggleClass("minus") ;
})
.plus{
background-image: url("https://cdn0.iconfinder.com/data/icons/ie_Bright/128/plus_add_blue.png");
width:130px;
height:130px;
background-repeat:no-repeat;
}
.plus.minus{
background-image: url("https://cdn0.iconfinder.com/data/icons/ie_Bright/128/plus_add_minus.png");
width:130px;
height:130px;
background-repeat:no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="plus">CHANGE</div>

If your images are named you can reference them through the DOM and change the source.
document["imgName"].src="../newImgSrc.jpg";
or
document.getElementById("imgName").src="../newImgSrc.jpg";

The most you could do is to trigger a background image change when hovering the LI. If you want something to happen upon clicking an LI and then staying that way, then you'll need to use some JS.
I would name the images starting with bw_ and clr_ and just use JS to swap between them.
example:
$("#images").find('img').bind("click", function() {
var src = $(this).attr("src"),
state = (src.indexOf("bw_") === 0) ? 'bw' : 'clr';
(state === 'bw') ? src = src.replace('bw_','clr_') : src = src.replace('clr_','bw_');
$(this).attr("src", src);
});
link to fiddle: http://jsfiddle.net/felcom/J2ucD/

Here, when clicking next or previous, the src attribute of an img tag is changed to the next or previous value in an array.
<div id="imageGallery">
<img id="image" src="http://adamyost.com/images/wasatch_thumb.gif" />
<div id="previous">Previous</div>
<div id="next">Next</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$( document ).ready(function() {
var images = [
"http://placehold.it/350x150",
"http://placehold.it/150x150",
"http://placehold.it/50x150"
];
var imageIndex = 0;
$("#previous").on("click", function(){
imageIndex = (imageIndex + images.length -1) % (images.length);
$("#image").attr('src', images[imageIndex]);
});
$("#next").on("click", function(){
imageIndex = (imageIndex+1) % (images.length);
$("#image").attr('src', images[imageIndex]);
});
$("#image").attr(images[0]);
});
</script>
I was able to implement this by modifying this answer: jQuery array with next and previous buttons to scroll through entries

If you don't want use js, I think, you can use instead of img and then use css like
a {
background: url('oldImage.png');
}
a:visited {
background: url('newImage.png');
}
EDIT: Nope. Sorry it works only for :hover

You can try something like this:
CSS
div {
width:200px;
height:200px;
background: url(img1.png) center center no-repeat;
}
.visited {
background: url(img2.png) center center no-repeat;
}
HTML
<div href="#" onclick="this.className='visited'">
<p>Content</p>
</div>
Fiddle

This script helps to change the image on click the text:
<script>
$(document).ready(function(){
$('li').click(function(){
var imgpath = $(this).attr('dir');
$('#image').html('<img src='+imgpath+'>');
});
$('.btn').click(function(){
$('#thumbs').fadeIn(500);
$('#image').animate({marginTop:'10px'},200);
$(this).hide();
$('#hide').fadeIn('slow');
});
$('#hide').click(function(){
$('#thumbs').fadeOut(500,function (){
$('#image').animate({marginTop:'50px'},200);
});
$(this).hide();
$('#show').fadeIn('slow');
});
});
</script>
<div class="sandiv">
<h1 style="text-align:center;">The Human Body Parts :</h1>
<div id="thumbs">
<div class="sanl">
<ul>
<li dir="5.png">Human-body-organ-diag-1</li>
<li dir="4.png">Human-body-organ-diag-2</li>
<li dir="3.png">Human-body-organ-diag-3</li>
<li dir="2.png">Human-body-organ-diag-4</li>
<li dir="1.png">Human-body-organ-diag-5</li>
</ul>
</div>
</div>
<div class="man">
<div id="image">
<img src="2.png" width="348" height="375"></div>
</div>
<div id="thumbs">
<div class="sanr" >
<ul>
<li dir="5.png">Human-body-organ-diag-6</li>
<li dir="4.png">Human-body-organ-diag-7</li>
<li dir="3.png">Human-body-organ-diag-8</li>
<li dir="2.png">Human-body-organ-diag-9</li>
<li dir="1.png">Human-body-organ-diag-10</li>
</ul>
</div>
</div>
<h2><a style="color:#333;" href="http://www.sanwebcorner.com/">sanwebcorner.com</a></h2>
</div>

function chkicon(num,allsize) {
var flagicon = document.getElementById("flagicon"+num).value;
if(flagicon=="plus"){
//alert("P== "+flagicon);
for (var i = 0; i < allsize; i++) {
if(document.getElementById("flagicon"+i).value !=""){
document.getElementById("flagicon"+i).value = "plus";
document.images["pic"+i].src = "../images/plus.gif";
}
}
document.images["pic"+num].src = "../images/minus.gif";
document.getElementById("flagicon"+num).value = "minus";
}else if(flagicon=="minus"){
//alert("M== "+flagicon);
document.images["pic"+num].src = "../images/plus.gif";
document.getElementById("flagicon"+num).value = "plus";
}else{
for (var i = 0; i < allsize; i++) {
if(document.getElementById("flagicon"+i).value !=""){
document.getElementById("flagicon"+i).value = "plus";
document.images["pic"+i].src = "../images/plus.gif";
}
}
}
}