37022

After click on same button show next image div at a time and hide current image div in javascript ht

Question:

I am using Javascript, Html5, Jquery and Css. Right now I have three image div and I want to show one image div after click on button and I want to show next div after click on same button and hide current div.

right now i am using this code:<br /> 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 is working fine for two image div but it is not working for the third image.I've taken help from this link:<a href="https://stackoverflow.com/questions/25981198/how-to-hide-one-div-and-show-another-div-using-button-onclick" rel="nofollow">https://stackoverflow.com/questions/</a>

Now I have three image div but right now I am showing one image div at a time after click on button.

<a href="https://i.stack.imgur.com/K6YXh.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/K6YXh.png" data-original="https://i.stack.imgur.com/K6YXh.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

I want to show next image div after click on button and hide current image div.I told earlier I am using three image div. my motive to show image is as rotating.<br /> Please give me some idea about this.

Answer1:

If you are using jQuery you could do this 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 of next() for going back.

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

Answer2:

Take a look at the 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 is setting the display property for Div1 to block. On the next call the second condition sets Div2 to block and Div1 to none again...so on the next call condition 1 is evaluated as true again, because Div1 was set to 'none' in the second condition.

You might try removing the 'else' and adding another else if condition that checks to see if Div2 == 'block', you know that if Div2 is set to .block' that the next image to be shown is 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 simpler to initialise a counter to keep track of which image is being shown since each Div has a unique ID and sequential value.

Recommend

  • Silverlight is completely buggy with canvas
  • Drag Fabric.js object from one canvas to another
  • How to change the origin of the canvas to the center?
  • HTML5 canvas drawImage not working on first click
  • Tkinter button 'not defined' when ran
  • Avoid jQuery UI resizable 'alsoResize' to move in opposite direction
  • “stack level too deep” When Processing Carrierwave Image Versions in Nested Form
  • I can't show LinearLayout at bottom to scroll view
  • DataTables+RequireJS: Cannot read property 'defaults' of undefined
  • Angularjs - Pagination appear after search filter
  • Compare a column between 2 csv files and write differences using Python
  • Python error: len() of unsized object while using statsmodels with one row of data
  • href inside href [duplicate]
  • Android Custom dialog inflating from layout - alignment issue
  • ONLY Visible Div form elements will get submitted
  • $_POST for text in DIV elements
  • countdown bar android example
  • Python PIL to extract number from image
  • How to draw a line dynamically in android [duplicate]
  • Outputting SharePoint Hyperlink Column as URL
  • Disable Kendo Autocomplete
  • Remove changes from one element when event occurs on another element?
  • How to view images from protected folder with php?
  • gspread or such: help me get cell coordinates (not value)
  • Chart.js Multiple dataset
  • Keep this build forever option - Jenkins
  • dc-js disable selecting slices on click for pie chart
  • Meteor: Do Something On Email Verification Confirmation
  • How to clear text inside text field when radio button is select
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • jquery mobile loadPage not working
  • align graphs with different xlab
  • Data Validation Drop Down Box Arrow Disappearing
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • How do you join a server to an Active Directory (domain)?
  • How do I configure my settings file to work with unit tests?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Binding checkboxes to object values in AngularJs
  • Android Heatmap on canvas or ImageView