samedi 1 avril 2017

check if text input matches one item inside one of multiple arrays within if and else if statements in javascript

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