After clicking on the same button, display the following div image at a time and hide the current div image in javascript html
I am using Javascript, Html5, JQuery and Css. Right now I have three div images and I want to show one div image after clicking a button and I want to show the next div after clicking on the same button and hide the current div.
right now i am using this code:
Css code:
#Div2 {
display: none;
}
#Div3 {
display: none;
}
HTML code:
<div class="container">
<div class="row">
<input id="Button1" type="button" value="Click" onclick="switchVisible();"/>
<div class="col-sm-4">
<div id="Div1">
<canvas id="canvas1" class="img-responsive center-block" style="float:left"></canvas>
</div>
<div id="Div2">
<canvas id="canvas2" class="img-responsive center-block" style="float:left"></canvas>
</div>
<div id="Div3">
<canvas id="canvas3" class="img-responsive center-block" style="float:left"></canvas>
</div>
</div>
</div>
</div>
Java Script Code:
function switchVisible() {
if (document.getElementById('Div1')) {
if (document.getElementById('Div1').style.display === 'none') {
document.getElementById('Div1').style.display = 'block';
document.getElementById('Div2').style.display = 'none';
document.getElementById('Div3').style.display = 'none';
}
else if (document.getElementById('Div2').style.display === 'none') {
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'block';
document.getElementById('Div3').style.display = 'none';
}
else
{
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'none';
document.getElementById('Div3').style.display = 'block';
}
}
}
This code works fine for two div images, but it doesn't work for the third image. I got help from this link: StackOverflow question.
Now I have three div images, but right now I am showing one div image per button click.
I want to show the next div image after the button is clicked and hide the current div image. I said earlier, I am using three div images. my motive is to show the image rotates.
Please give me some idea about this.
source to share
If you are using jQuery, you can do it like this:
function switchVisible() {
$(".img-responsive").parent().each(function(){
if($(this).is(":visible")) {
$(".img-responsive").parent().hide();
if ($(this).next().length) {
$(this).next().show();
} else {
$($(".img-responsive")[0]).parent().show();
}
return false;
}
})
}
You can use prev()
instead next()
to return.
function switchVisibleRevert() {
$(".img-responsive").parent().each(function(index){
if($(this).is(":visible")) {
$(".img-responsive").parent().hide();
if ($(this).prev().length) {
$(this).prev().show();
} else {
$($(".img-responsive")[$(".img-responsive").length-1]).parent().show();//show last element
}
return false;
}
})
}
source to share
Take a look at conditional statements.
if (document.getElementById('Div1')) {
if (document.getElementById('Div1').style.display === 'none') {
document.getElementById('Div1').style.display = 'block';
document.getElementById('Div2').style.display = 'none';
document.getElementById('Div3').style.display = 'none';
}
else if (document.getElementById('Div2').style.display === 'none') {
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'block';
document.getElementById('Div3').style.display = 'none';
}
else
{
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'none';
document.getElementById('Div3').style.display = 'block';
}
}
The first conditional statement sets the display property to block Div1. On the next call, the second condition sets Div2 to block and Div1 to none again ... so the next call condition 1 evaluates to true again, since Div1 in the second condition was set to "none".
You can try to remove the "else" and add another other if the condition that checks if Div2 contains == 'block', you know that if Div2 is set to .block 'then the next image to be shown is an image 3
if (document.getElementById('Div1')) {
if (document.getElementById('Div1').style.display === 'none') {
document.getElementById('Div1').style.display = 'block';
document.getElementById('Div2').style.display = 'none';
document.getElementById('Div3').style.display = 'none';
}
else if (document.getElementById('Div1').style.display === 'block') {
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'block';
document.getElementById('Div3').style.display = 'none';
}
else if (document.getElementById('Div2').style.display === 'block')
{
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'none';
document.getElementById('Div3').style.display = 'block';
}
}
It might be easier to initialize the counter to keep track of which image is being displayed, since each Div has a unique ID and sequential value.
source to share