Hi everyone .I’m quite new at Javascript/Jquery and I have a decent HTML and CSS background. Here is my problem. I have a layout with 3 buttons corresponding to 6 GIF images possibilities depending on actual focused button and 3 texts corresponding to the 3 buttons . When clicking on one of the three buttons, to display the right GIF and right text, code has to check actual focused button and pick one of 2 img wrapped in 2 different picture elements with dedicated classes.
To do so, I called Jquery function and wrote an .on(‘click’, function() {…}) containing an if…else if statement without else . The problem is that it works but not completely, only the if is displaying when clicking on proper button although there are 2 possibilities per if…else if statement corresponding to 2 different GIF images. By the way those GIF are not heavy (each one less than 1 Mo).
After checking in many websites (including Stack Overflow) during hours and hours if not days I still can’t make it work. I tried to change selectors : to use $(“:focus”) , to add tabindex attribute to buttons…and so on! Even Classic Javascript $( document.activeElement ) solution does not work, with it it’s worse : nothing happens on buttons click. No problem with texts because they are the same in each if…else if statement .
Here is an extract of my HTML :
<div class="images-gif">
<!-- --------GIF BUTTON 1------------->
<!--Possibility 1-->
<picture class="btn1-pos1">
<source class="btn1-pos1"
media="(orientation: landscape)"
srcset="images/GIF/danse-deb1_1920.gif 1920w,
images/GIF/danse-deb1_1440.gif 1440w,
images/GIF/danse-deb1_960.gif 960w,
images/GIF/danse-deb1_800.gif 800w,
images/GIF/danse-deb1_600.gif 600w"
sizes="100vw">
<source class="btn1-pos1"
media="(orientation: portrait)"
srcset="images/GIF/danse-deb1_portrait_600.gif 600w,
images/GIF/danse-deb1_480.gif 480w,
images/GIF/danse-deb1_320.gif 320w"
sizes="100vw">
<img src="images/GIF/danse-deb1_1920.gif" class="btn1-pos1" width="710" height="600" alt="dance 1"/>
</picture>
<!--Possibility 2-->
<picture class="btn1-pos2">
<source class="btn1-pos2"
media="(orientation: landscape)"
srcset="images/GIF/danse-deb2_1920.gif 1920w,
images/GIF/danse-deb2_1440.gif 1440w,
images/GIF/danse-deb2_960.gif 960w,
images/GIF/danse-deb2_800.gif 800w,
images/GIF/danse-deb2_600.gif 600w"
sizes="100vw" >
<source class="btn1-pos2"
media="(orientation: portrait)"
srcset="images/GIF/danse-deb2_portrait_600.gif 600w,
images/GIF/danse-deb2_480.gif 480w,
images/GIF/danse-deb2_320.gif 320w"
sizes="100vw" >
<img src="images/GIF/danse-deb2_1920.gif" class="btn1-pos2" width="710" height="600" alt="dance 2"/>
</picture>
<!-- --------GIF BUTTON 2------------->
<!--Possibility 1-->
<picture class="btn2-pos1">
<source class="btn2-pos1"
media="(orientation: landscape)"
srcset="images/GIF/danse-inter1_1920.gif 1920w,
images/GIF/danse-inter1_1440.gif 1440w,
images/GIF/danse-inter1_960.gif 960w,
images/GIF/danse-inter1_800.gif 800w,
images/GIF/danse-inter1_600.gif 600w"
sizes="100vw">
<source class="btn2-pos1"
media="(orientation: portrait)"
srcset="images/GIF/danse-inter1_portrait_600.gif 600w,
images/GIF/danse-inter1_480.gif 480w,
images/GIF/danse-inter1_320.gif 320w"
sizes="100vw">
<img src="images/GIF/danse-inter1_1920.gif" class="btn2-pos1" width="710" height="600" alt="dance 3"/>
</picture>
<!--Possibility 2-->
<picture class="btn2-pos2">
<source class="btn2-pos2"
media="(orientation: landscape)"
srcset="images/GIF/danse-inter2_1920.gif 1920w,
images/GIF/danse-inter2_1440.gif 1440w,
images/GIF/danse-inter2_960.gif 960w,
images/GIF/danse-inter2_800.gif 800w,
images/GIF/danse-inter2_600.gif 600w"
sizes="100vw">
<source class="btn2-pos2"
media="(orientation: portrait)"
srcset="images/GIF/danse-inter2_portrait_600.gif 600w,
images/GIF/danse-inter2_480.gif 480w,
images/GIF/danse-inter2_320.gif 320w"
sizes="100vw">
<img src="images/GIF/danse-inter2_1920.gif" class="btn2-pos1" width="710" height="600" alt="dance 4"/>
</picture>
<!-- --------GIF BUTTON 3------------->
<!--Possibility 1-->
<picture class="btn3-pos1">
<source class="btn3-pos1"
media="(orientation: landscape)"
srcset="images/GIF/danse-av1_1920.gif 1920w,
images/GIF/danse-av1_1440.gif 1440w,
images/GIF/danse-av1_960.gif 960w,
images/GIF/danse-av1_800.gif 800w,
images/GIF/danse-av1_600.gif 600w"
sizes="100vw">
<source class="btn3-pos1"
media="(orientation: portrait)"
srcset="images/GIF/danse-av1_portrait_600.gif 600w,
images/GIF/danse-av1_480.gif 480w,
images/GIF/danse-av1_320.gif 320w"
sizes="100vw">
<img src="images/GIF/danse-av1_1920.gif" class="btn3-pos1" width="710" height="600" alt="dance 5"/>
</picture>
<!--Possibility 2-->
<picture class="btn3-pos2">
<source class="btn3-pos2"
media="(orientation: landscape)"
srcset="images/GIF/danse-av2_1920.gif 1920w,
images/GIF/danse-av2_1440.gif 1440w,
images/GIF/danse-av2_960.gif 960w,
images/GIF/danse-av2_800.gif 800w,
images/GIF/danse-av2_600.gif 600w"
sizes="100vw">
<source class="btn3-pos2"
media="(orientation: portrait)"
srcset="images/GIF/danse-av2_portrait_600.gif 600w,
images/GIF/danse-av2_480.gif 480w,
images/GIF/danse-av2_320.gif 320w"
sizes="100vw">
<img src="images/GIF/danse-av2_1920.gif" class="btn3-pos2" width="710" height="600" alt="dance 6"/>
</picture>
<div class="btn-group">
<button type="button" id="btn-1" tabindex="1" autofocus>FIRST</button>
<button type="button" id="btn-2" tabindex="2">SECOND</button>
<button type="button" id="btn-3" tabindex="3">THIRD</button>
</div>
</div>
And here is Javascript/Jquery corresponding code :
$(function() {
$("#btn-2").on("click", function() {
if($("#btn-1:focus")) {
$(".btn1-pos1").hide();
$(".btn1-pos2").hide();
$(".btn2-pos2").hide();
$(".btn3-pos1").hide();
$(".btn3-pos2").hide();
$(".btn2-pos1").show();
$(".txt-1").hide();
$(".txt-3").hide();
$(".txt-2").show(1200);
} else if($("#btn-3:focus")) {
$(".btn1-pos1").hide();
$(".btn1-pos2").hide();
$(".btn3-pos1").hide();
$(".btn3-pos2").hide();
$(".btn2-pos1").hide();
$(".btn2-pos2").show();
$(".txt-1").hide();
$(".txt-3").hide();
$(".txt-2").show(1200);
} ;
}) ;
// ---------------------------------------------------------------------
$("#btn-1").on("click", function() {
if($("#btn-3:focus")) {
$(".btn3-pos1").hide();
$(".btn3-pos2").hide();
$(".btn2-pos1").hide();
$(".btn2-pos2").hide();
$(".btn1-pos2").hide();
$(".btn1-pos1").show();
$(".txt-3").hide();
$(".txt-2").hide();
$(".txt-1").show(1200);
} else if($("#btn2:focus)) {
$(".btn3-pos1").hide();
$(".btn3-pos2").hide();
$(".btn2-pos1").hide();
$(".btn2-pos2").hide();
$(".btn1-pos1").hide();
$(".btn1-pos2").show();
$(".txt-2").hide();
$(".txt-3").hide();
$(".txt-1").show(1200);
} ;
} ) ;
// --------------------------------------------------------------------
$("#btn-3").on("click", function() {
if($("#btn-2:focus")) {
$(".btn1-pos1").hide();
$(".btn1-pos2").hide();
$(".btn2-pos1").hide();
$(".btn2-pos2").hide();
$(".btn3-pos2").hide();
$(".btn3-pos1").show();
$(".txt-2").hide();
$(".txt-1").hide();
$(".txt-3").show(1200);
} else if($("#btn-1:focus")) {
$(".btn1-pos1").hide();
$(".btn1-pos2").hide();
$(".btn2-pos1").hide();
$(".btn2-pos2").hide();
$(".btn3-pos1").hide();
$(".btn3-pos2").show();
$(".txt-2").hide();
$(".txt-1").hide();
$(".txt-3").show(1200);
} ;
}) ;
})
So, what am I doing wrong? Is it an **if...else if** statement syntax error? Can I change something in HTML? Or make it work in a shorthand code using Javascript/Jquery? Problem seems to be the if...else if statement as it only considers "if" and not "else if". Text changes, GIF images too but not with the 2 possibilities only possibility of "if" and never considers the "else if" code. Is it a **picture** element tricky thing that I'm not aware about? Still don't know after many researches.
If someone can help me it would be a very kind help. **Thank you so much!** *I'm mad not accomplish it by myself* . I hope one day, soon, I will help this amazing community!
Gerard