Cant figure out why i cant display error message for value not in array

Question

I am working on a page where the user input is compared against an array. When the user enters a value in the form input, it then filters the array for an exact match and displays the correct item. My problem is that if a users enters a value that is not included in the array, it does not display an error message. Please take a look at the code below. The problem lies within the last if statement that is looking for parts of a string like "GT" "MT" etc. I don't think its necessary to include everything because I think just by looking at my JavaScript someone will know what the issue is. Hope someone can help! Thanks!

//load gif on click
$(function(){

    //grab gif image and assign to variable
    var image = new Image();
        image.src='https://cento.com/images/gif/EARTH.gif';

    //store can code values in array
    var canCode = [
        {code: "7283SCBSGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
        {code: "7283SC1SGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
        {code: "7283SC2SGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
        {code: "7283SC3SGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
        {code: "7283SC4SGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
        {code: "7283SCASGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
        {code: "7338SC3SGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
        {code: "7338SC4SGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
        {code: "7338SCASGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
        {code: "7338SCBSGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
        {code: "7338SC1SGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
        {code: "7338SC2SGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
        {code: "7355SEASGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
        {code: "7355SEBSGT", codeOZ: 5, species: "tonno", country: "Maldives", boat: "Dhonis"},
        {code: "7257S93S2T", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis"},
        {code: "7257S9AS2T", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis"},
        {code: "7257S9BS2T", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis"},
        {code: "7027S93S2T", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis"},
        {code: "7339S91SGT", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis"},
        {code: "7339S92SGT", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis"},
        {code: "7339S93SGT", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis"},
        {code: "7339S94SGT", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis"},
        {code: "7347S9ASGT", codeOZ: 3, species: "tonno", country: "Maldives", boat: "Dhonis"},
        {code: "61082SD1SMT", codeOZ: 5, species: "albacore"}
    ];


        //refresh map on button click
        $('#canCode').click(function(e){

            //assign user input to variable
            var usersInput=$("#can").val().toUpperCase();

            //filter out the array against user input
            let chosen = canCode.filter(can => can.code===usersInput);

            //assign data to variables 
            var code = chosen[0].code.toUpperCase();
            var codeOZ = chosen[0].codeOZ;
            var species = chosen[0].species;
            var country = chosen[0].country;
            var boat = chosen[0].boat;

            //prevent default behavior
            e.preventDefault();

            //compare user input against array
            if(code === usersInput) {

                console.log(code);
                console.log(codeOZ);
                console.log(species);
                console.log(country);
                console.log(boat);

                //search for tuna identifier and show correct information
                if (usersInput.includes("GT") || usersInput.includes("2T")) {
                    console.log("tonno");
                    $('.selectedTunaCan').show();    
                    $('.selectedAlbacoreTunaCan').hide();    
                    $('.fishSpeciesSkipjack').show();
                    $('.fishSpeciesAlbacore').hide();
                } else if (usersInput.includes("MT")) {
                    console.log("albacore");
                    $('.selectedTunaCan').hide();
                    $('.selectedAlbacoreTunaCan').show();
                    $('.fishSpeciesSkipjack').hide();
                    $('.fishSpeciesAlbacore').show();
                } else if (usersInput !== code) { 
                    console.log("invalid code entered");
                }

            } 

        }); 

});

each loop with a click being added to one element? That is a bad idea. You are adding more and more click handlers on each iteration — epascarello, Apr 09 '18 at 14:18
Also you are storing `usersInput` when the page loads, it is not going to magically have the latest value. The variable will contain whatever is in it at document.ready. You should be reading it when the button is clicked. You should be than looping over the array and looking for a match. — epascarello, Apr 09 '18 at 14:33
@epascarello thanks i was able to fix that and remove the loop. now just gotta figure out the if statement part. appreciate it! — Tom, Apr 09 '18 at 14:39
[What does your step debugger tell you?](http://stackoverflow.com/questions/25385173/what-is-a-debugger-and-how-can-it-help-me-diagnose-problems) — , Apr 09 '18 at 14:39
Possible duplicate of [What is a debugger and how can it help me diagnose problems?](https://stackoverflow.com/questions/25385173/what-is-a-debugger-and-how-can-it-help-me-diagnose-problems) — , Apr 09 '18 at 14:39
@JarrodRoberson when i dont enter a value in the box it now says TypeError: chosen[0] is undefined. please look at the above code it has been modified — Tom, Apr 09 '18 at 14:42

apple apple · Accepted Answer · 2018-04-09T14:44:54.910

1

let's cut out unnecessary part and produce mcve (which you should have done before asking)

if (code === usersInput) { // <--- 1
    if (usersInput.includes("GT") || usersInput.includes("2T")) {
        //...
    } else if (usersInput.includes("MT")) {
        //...
    } else if (usersInput !== code) { // <--- 2
        console.log("invalid code entered"); //never reached
    }
}

now it's pretty clear 1 and 2 cannot happens at same time, so the console log is never reached.

edited Apr 09 '18 at 14:44

answered Apr 09 '18 at 14:37

apple apple

10,292
2
16
36

thank you for your help. i totally overlooked this. i got it to work – Tom Apr 09 '18 at 15:04

Cant figure out why i cant display error message for value not in array

1 Answers1