I have a page in a application where I want to have specific images pop up if a specific text is entered by the user. I tried with one example and it worked, but now that I added several variables and their array rows, it does not work. I can't tell exactly what mistake I have made here, I am guessing it's something to do with the nesting with the if and else if condition/statements
HTML
<form>
<input type="text" name="search" placeholder="Type or tap on the microphone above">
</form>
<div class="imageContainerSearchPage">
<img id="toast_018" class="hiddenElement" src="animsAll/Anims_018_Toast.gif">
<img id="nobaloons_014" class="hiddenElement" src="animsAll/Anims_014_no baloons.gif">
<img id="wegotastory_019" class="hiddenElement" src="animsAll/Anims_019_Button_We got a story_textandbook.gif">
<img id="parisIsBurningButton_021" class="hiddenElement" src="animsAll/Anims_021_Paris is Burning Button.gif">
</div>
<!--[•VIDEO BACKGROUND•]-->
<video autoplay loop muted>
<source src="videos/music_saint_etienne_only_love_cropped_370x660.mp4" type="video/mp4">
Your browser does not support the video tag.
</video></div>
JAVASCRIPT: not working
$( "input" )
.keyup(function() {
var value = $( this ).val();
var no = ["sixties", "sixty", "sixtys"];
var weGotAStory = ["we", "got", "story"];
var sandwich = ["sandwich", "grilled"];
var parisIsBurningButton = ["paris", "burning"];
var toast = ["toasted", "toast", "toasts"];
if($.inArray(value, no) !== false) {
$("#nobaloons_014").show().delay(10000).fadeOut();
} else if ($.inArray(value, weGotAStory) !== false) {
$("#wegotastory_019").show().delay(10000).fadeOut();
} else if ($.inArray(value, parisIsBurningButton) !== false) {
$("#parisIsBurningButton_021").show().delay(10000).fadeOut();
} else ($.inArray(value, toast) !== false) {
$("#toast_018").show().delay(10000).fadeOut();
}
})
JAVASCRIPT: working (single IF statement)
$( "input" ).keyup(function() {
var value = $( this ).val();
var no = ["no", "nope", "nos"];
if($.inArray(value, no) !== false) {
$("#nobaloons_014").show().delay(10000).fadeOut();
}
})
Aucun commentaire:
Enregistrer un commentaire