javascript slideshow thing opens all slides at once

Question

I am making a slideshow thing where all cells in a table are invisible using javascript. I want a button to just continuously show another cell when it is clicked.

Here is my snippet:

 window.onload = umYeahThisIsAFunction; function umYeahThisIsAFunction() { var slide = 1; var A1 = document.getElementById('A1'); A1.style.visibility = "hidden"; var A2 = document.getElementById('A2'); A2.style.visibility = "hidden"; var A3 = document.getElementById('A3'); A3.style.visibility = "hidden"; var A4 = document.getElementById('A4'); A4.style.visibility = "hidden"; var A5 = document.getElementById('A5'); A5.style.visibility = "hidden"; var A6 = document.getElementById('A6'); A6.style.visibility = "hidden"; var A7 = document.getElementById('A7'); A7.style.visibility = "hidden"; var A8 = document.getElementById('A8'); A8.style.visibility = "hidden"; var A9 = document.getElementById('A9'); A9.style.visibility = "hidden"; var A10 = document.getElementById('A10'); A10.style.visibility = "hidden"; } function showSlide() { if (slide = 1) { var B1 = document.getElementById('A1'); B1.style.visibility = "visible"; slide = 2; } else { if (slide = 2) { var B2 = document.getElementById('A2'); B2.style.visibility = "visible"; slide = 3; } else { if (slide = 3) { var B3 = document.getElementById('A3'); B3.style.visibility = "visible"; slide = 4; } else { if (slide = 4) { var B4 = document.getElementById('A4'); B4.style.visibility = "visible"; slide = 5; } else { if (slide = 5) { var B5 = document.getElementById('A5'); B5.style.visibility = "visible"; slide = 6; } else { if (slide = 6) { var B6 = document.getElementById('A6'); B6.style.visibility = "visible"; slide = 7; } else { if (slide = 7) { var B7 = document.getElementById('A7'); B7.style.visibility = "visible"; slide = 8; } else { if (slide = 8) { var B8 = document.getElementById('A8'); B8.style.visibility = "visible"; slide = 9; } else { if (slide = 9) { var B9 = document.getElementById('A9'); B9.style.visibility = "visible"; slide = 10; } else { var B10 = document.getElementById('10'); B10.style.visibility = "visible"; } }

 <!DOCTYPE html> <html> <head></head> <body> <table> <tr> <td> <table> <tr> <td width="1000" height="75" bgcolor="FF0000" id="A1"> </td> </tr> <td width="1000" height="75" bgcolor="FFA500" id="A2"> </td> </tr> <tr> <td width="1000" height="75" bgcolor="FFFF00" id="A3"> </td> </tr> <tr> <td width="1000" height="75" bgcolor="00FF00" id="A4"> </td> </tr> <tr> <td width="1000" height="75" bgcolor="turquoise" id="A5"> </td> </tr> <tr> <td width="1000" height="75" bgcolor="0000FF" id="A6"> </td> </tr> <tr> <td width="1000" height="75" bgcolor="FF1493" id="A7"> </td> </tr> <tr> <td width="1000" height="75" bgcolor="FF00FF" id="A8"> </td> </tr> <tr> <td width="1000" height="75" bgcolor="FFaf00" id="A9"> </td> </tr> <tr> <td width="1000" height="75" bgcolor="5a3600" id="A10"> </td> </tr> </table> </td> <td> <table> <tr> <td height="75" bgcolor="ff0000" valign="top" align="right" style="position: fixed"> <button type="button" onclick="showSlide()">Next</button> </td> </tr> </table> </td> </tr> </table> </body> </html>

I'm sorry I put in the whole code. I also want to make it clear that the only time I want table cells to disappear is onload.

Answer 1

Perhaps this is what you're looking for:

<button onclick="showNext()">Show Next</button>

<script type="text/javascript">
    var cLetter = "A";
    var cNumber = "1";

    function showNext() {
        var NextCell = document.getElementById( cLetter + cNumber );
        NextCell.style.visibility = "visible";
        cNumber++;
    }
</script>

javascript slideshow thing opens all slides at once

Question

1 answers

solution1
0 ACCPTED 2015-08-13 15:49:32

javascript slideshow thing opens all slides at once

Question

1 answers

solution1 0 ACCPTED 2015-08-13 15:49:32

solution1
0 ACCPTED 2015-08-13 15:49:32