Else statement malfunctioning with Alert() function

I have noticed an issue with my user input field. Even when I enter a valid genre name, the alert prompt still appears saying it is not a valid genre. This occurs after entering both valid and invalid inputs.

For example, if the user enters "horror," which is a valid input, the alert still shows up indicating that the genre is not valid.

The problem seems to be related to the condition within the if statement where it checks for genre[i].name.

$('#submitButton').click(function(){

    reset();

    // getting genre from user
    let genreSubmission = $('#inputSearch').val().toLowerCase();
    let genreId = 0;

    // api genre ids objects to change the api link
    const genre = [
        {
            "id": 28,
            "name": "Action"
        },
        ...
        ];

    for (let index = 0; index < genre.length; index++) {
        if(genreSubmission === genre[index].name.toLowerCase()){
            genreId = genre[index].id;
            console.log(genreId);
        } else{
            return alert("not a valid genre");
        }
    };

Answer №1

Imagine typing Adventure.

  1. You start the loop with index set to 0
  2. The value of genre[0].name is Action, not Adventure
  3. Therefore, you execute
    return alert("not a valid genre");
    which
    • Triggers an alert message
    • Causes the function to exit (since that's the purpose of return)

As a result of exiting the loop early, the value of index remains at 0 without finding a match at index 1.


To ensure you search the entire array before issuing an alert and returning, it's important to utilize the appropriate method:

Instead of using a regular for loop, consider leveraging the built-in array method explained here:

const match = genre.find( 
    element => element.name.toLowerCase() === genreSubmission 
);
if (match) {
    console.log(match.id);
} else {
    return alert("not a valid genre");
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why is it that consolidating all my jQuery plugins into one file is ineffective?

Prior to this, I included the following scripts: <script type="text/javascript" src="{{MEDIA_URL}}js/plugins/json2.js"></script> <script type="text/javascript" src="{{MEDIA_URL}}js/plugins/jquery-msdropdown/js/jquery.dd.js"></script&g ...

What could be causing the Toast message to not show up in react-native-root-toast?

Incorporated react-native-root-toast into my expo project running on expo 51. Please see the code snippet below for reference: const toastColors = { 'error': { color: '#DA5C53', iconName: <WarningIcon size="5 ...

Learn the steps to activate on-page editing feature!

Is there a way to make a section of a webpage editable when a button is clicked? (e.g. edit & view on the same page) For instance, imagine you could click "edit" on this very page (the one you are currently reading), and the title and content become edita ...

Not entirely certain about how to execute this concept using AJAX

While pondering the development of an instant messaging application, I aimed to decrease the frequency of AJAX requests (currently one every .2s). This led me to devise a unique approach: Initiate an AJAX request from the user side to the server. Wait ...

Issue encountered while compiling all handlebars templates into a single JavaScript file

Below is the structure of my folders: app └───templates ├───templ1.hbs ├───templ2.hbs └───templ3.hbs I am looking to compile (precompile) all templN.hbs handlebars template files into one templ.js file. However ...

I created a customized version of jQuery tabs, but I am looking for an external link to display the tab content and to style the original navigation

I've been experimenting with modifying a tabs script in jQuery that I came across. It seems like my attempt to enhance it has made things more complex than necessary. While I know creating tabs with jQuery is simple, I wanted to create my own version ...

JavaScript Pagination and JSON Concerns in Coding Techniques

Currently, I am pre-caching a dataset with a maximum limit of 500. The Ajax request fetches all the data at once, allowing for front loading and pagination. Everything works fine this way. However, we are in the process of transitioning our backend archit ...

Tips for improving performance with ng-repeat directive?

I have encountered some performance issues while using socket.io with the ng-repeat directive in Angular. The application slows down significantly when receiving a large amount of data from the backend, making it impossible to interact with the app. What w ...

Is there a way to increase the total of each row by two when a button is clicked?

Looking to enhance the sum of each row by two depending on whether a button is clicked. HTML: <table> <tr> <td> <input type="checkbox" class="prof" name="prof" value="0"> <input class=&quo ...

A guide to connecting keyboard events to div elements within a React application

Currently working on a basic react project to gain some practical experience with the library. I aim to develop a simple user interface with blank spaces to be filled in by typing via keyboard input. Here's a glimpse of my progress so far: function ...

You are unable to assign mutations in Vuex

Dealing with a peculiar problem where "val" and "ok" can be used within "console.log()", but for some reason, state.user cannot be assigned any value. However, state.user does display 'ok' on the website. export const state = () => ({ user: ...

Set the current time to ISO8601 format

I need assistance with creating a "time passed" counter for my website based on an API call that returns data in the following format: "created_at": "2018-05-16T14:00:00Z", What is the best approach to calculate and display the time that has passed since ...

Encapsulate the module function and modify its output

I am currently utilizing the node-i18n-iso-countries package and I need to customize the getNames function in order to accommodate a new country name that I wish to include. At the moment, I am achieving this by using an if-else statement like so: let cou ...

Stop inserting repeatedly if there is no new data available

I'm looking for a simple way to implement an if-else statement in my AJAX code to display new data only once it's found, without repeating the same data. Also, I need to figure out how to store the last ID as a variable so that I can use it when ...

Display or conceal a YouTube video with a click

Q1) Is it possible to use JQuery on page load to detect the file name of an image and then dynamically position it on the page with CSS? Q2) What is the most efficient way to achieve this without embedding iframe code inside a specific div.icon element? ...

Tips for properly invoking an asynchronous function on every rerender of a component in Vue.js

Situation: An analysis module on a website that needs to display three different data tables, one at a time. Approach: The module is a component containing three buttons. Each button sets a variable which determines which table to render. Depending on the ...

Exploring the potentials of VivagraphJS alongside WebGL and the magic of event listeners

After coming across Vivagraph JS on GitHub, I was absolutely enthralled. However, I've encountered an issue that seems to be related to WebGL. My current objective is to: var graph = Viva.Graph.graph(); var layout = Viva.Graph.Layout.forceDirec ...

How to Enhance Angular ui-router nested views with Resolve?

I have been working on creating a customized version of my Angular 1.4.12 application with nested views. The main purpose behind this customization is to accommodate sections within the app that require a header/content/footer structure, while others do no ...

Quicker Solution to Iteration in Google Apps Script with JavaScript

I've set up a for loop to extract sales data from an array (salesLog) and transfer it to a designated sheet (targetSheet) in columns. The sales data is spread across multiple columns in the array. The loop adds up the columns between columnStart and c ...

The significance of the "$=" or "?=" symbols in lit-element illustrations

I'm struggling to comprehend the purpose of ?= or $= in these two instances: First Example: Lit-Element README <div id="box" class$="${this.uppercase ? 'uppercase' : ''}"> <slot>Hello World</slot> </div> ...