Nested For Loop to activate slideshow and turn off another - slideshow

Question

I have multiple slideshows but only want one running chosen by id. The rest turned off and hidden.
I have the first one loading onload.
I have a nested for loop running through and turning them on and off.
This is not working consistently.
Some of the code I found on the internet. the outer for loop runs before any id is even chosen.
I don't even know if the active slider is being stopped properly before the new one is activated.
My loops seem to work correctly with just alerts and no code for the slideshow.
Then when I introduce the slideshows it works sometimes but not consistently.
Choosing id 1 or 2 seems to work but sometimes it will not loop through the nested 3 or 4.
Some kind of conflict or is it logic error?
Please help this desperate beginner. I volunteered to do this for our choir
I am sorry that I wasn't able to format the code properly for viewing.
ok, I added jsfiddle
https://jsfiddle.net/5s0q30s8/
with the loops using only alerts.
<button id=1>Group Photos</button>
<button id=2>Miscellaneous</button>
<button id=3>Trips</button>
<button id=4>Old Pictures</button>
<script>
var buttons = document.getElementsByTagName("button");
var buttonsCount = buttons.length;
for (var i=0; i <= buttonsCount; i+=1){
buttons[i].onclick=function(e){
var id= this.id;
alert(id + ' clicked');
for (var i=1; i <= buttonsCount; i+=1){
alert('nested for' + i);
if (i != id) {
var temp = ('.slider-wrapper ' + i)
alert('Not id ' + temp);
$('.slider-wrapper' + i).hide();
/* $('#slider' + i).hide(); */
$('#slider' + i).data('nivoslider').stop();
}
else {
alert('true '+ i);
$('.slider-wrapper' + i).show();
$('#slider' + i).nivoSlider({ effect: 'fade' } );
} //end else
} //end nested for
};
} //end for
</script>
<div class="slider-wrapper1 theme-default">
<div id="slider1" class="nivoSlider">
<img src="images/Choir2014.jpg" alt="" title="2014" />
........More images.
</div>
</div>
<div class="slider-wrapper2 theme-default">
<div id="slider2" class="nivoSlider">
<img src="images/Choir2014.jpg" alt="" title="2014" />
........More images.
</div>
</div>
<div class="slider-wrapper3 theme-default">
<div id="slider3" class="nivoSlider">
<img src="images/Choir2014.jpg" alt="" title="2014" />
........More images.
</div>
</div>
<div class="slider-wrapper4 theme-default">
<div id="slider4" class="nivoSlider">
<img src="images/Choir2014.jpg" alt="" title="2014" />
........More images.
</div>
</div>
<script type="text/javascript">
$(window).load(function() {
$('#slider1').nivoSlider({ effect: 'fade' });
});
</script>

Answer 1

I must say, your code is very messy in my eyes. I do see you made an effort at using jQuery, so I will assume you are able to use that.
Your goal as I understand it:
There are 4 sliders
There are 4 buttons
You click one button, and the respective slideshow shows up.
$('#slideButtons button').click(function(){
var id = $(this).attr("id");
$('#content .slide:visible').hide();
$('#content #c' + id).show();
// Any other logic can be put here, like starting or stopping sliders.
});
/* Show the first slider, and hide everything else by applying display:none to it */
#content div:not(#c1) {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slideButtons">
<button id="1">1</button>
<button id="2">2</button>
<button id="3">3</button>
<button id="4">4</button>
</div>
<div id="content">
<div class="slide" id="c1">Number 1! Put Slideshow 1 here.</div>
<div class="slide" id="c2">Number 2! Put Slideshow 2 here.</div>
<div class="slide" id="c3">Number 3! Put Slideshow 3 here.</div>
<div class="slide" id="c4">Number 4! Put Slideshow 4 here.</div>
</div>
From here you can build it out. I'm sure it will look a lot cleaner too then. Also, if you are going to debug with that many alerts, try using console.log instead of alert. It's a lot less intrusive and you can simply read through it.