The window.onload function does not function properly when placed within an if-else statement

Can you help me troubleshoot my code?

If the user's inputted birthday matches the JSON birthday, then a form will be displayed (I haven't included it here).

Otherwise, the form will not be displayed.

performBirthdayCheck: function() {
  let userBirthday = moment(this.userBday).format("MM DD, YYYY"),
    resultBirthday = moment(this.results.BIRT_D).format("MM DD, YYYY");
  if (userBirthday === resultBirthday) {
    alert("CORRECT");
    window.onload = function() {
      const btn = document.querySelector("#show-form");
      const form = document.querySelector(".form");
      const close = document.querySelector(".close-container");
      btn.addEventListener("click", () => {
        form.classList.add("form-show");
        close.classList.add("x-show");
      });
      close.addEventListener("click", function() {
        close.classList.remove("x-show");
        form.classList.remove("form-show");
      });
    };
  } else {
    alert("WRONG");
    window.stop();
  }
}

Answer №1

When you use window.onload = function() {}, you are essentially assigning the method to the onload event of the window. However, the code inside it will not execute because the onload event has already been triggered.

There is actually no need to explicitly write onload in this case. Your code can be simplified like so:

checkBirthday: function() {
  let userBirthday = moment(this.userBday).format("MM DD, YYYY"),
    resultBirtday = moment(this.results.BIRT_D).format("MM DD, YYYY");
  if (userBirthday === resultBirtday) {
    alert("CORRECT");
      const btn = document.querySelector("#show-form");
      const form = document.querySelector(".form");
      const close = document.querySelector(".close-container");
      btn.addEventListener("click", () => {
        form.classList.add("form-show");
        close.classList.add("x-show");
      });
      close.addEventListener("click", function() {
        close.classList.remove("x-show");
        form.classList.remove("form-show");
      });
  } else {
    alert("WRONG");
    window.stop();
  }
}

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

Sending Email Form Data to Backend using AngularJS with PHP

I have been working on developing an Ionic Mobile app using AngularJS, and I am facing an issue with sending emails from the application. The PHP functionality works fine as I tested it with a parameterized URL, but for some reason, it is not working withi ...

Advantages of optimizing NodeJS/TypeScript application by bundling it with webpack

Currently, I am working on a Node/Express application and I am interested in incorporating the most recent technologies. This includes using TypeScript with node/Express along with webpack. I have a question: What advantages come with utilizing webpack t ...

Having difficulty accessing the value of a table td element in HTML using a jQuery selector

When creating a table, I utilize ng-repeat to generate table rows. Whenever the dropdown changes, a function is triggered which applies certain conditions. Based on these conditions, an object is added to an array that is bound to a scope variable. Here i ...

Vuejs search functionality not working when using the filter method

I'm relatively new to Vue.js and I'm attempting to utilize the computed method in order to create a search bar that specifically searches through names. However, I keep encountering an error stating "'this.info.filter' is not a function ...

How can array data be organized by date in an Ajax response?

i have an array with the following data [{ date: "January 2019", sum: 20, name: "Persada", },{ date: "Februay 2019", sum: 21, name: "Persada", },{ date: "April 2019", sum: 22, name: "Persada", },{ date: "January 2019", ...

What is the method to modify the text of an element without altering its existing properties?

https://i.stack.imgur.com/cBu6P.png $.ajax({ type: "GET", url: "my url" + x, datatype: "html", success: function(data){ //alert(x); //var Content = data; var sendId ; var data = $.parseJSON(data); ...

Similar to the reference of $(this) in jQuery, there is a similar concept in Vue.js

When working with jQuery, the use of $(this) allows for accessing elements without relying on classes or ids. How can we achieve a similar outcome in Vue.js? ...

Positioning of Responsive Slider

I'm currently working on a responsive website, but I am facing challenges with the placement of the slideshow dots. When I switch to the device toolbar, they seem to change position. I have tried various methods such as using relative and absolute uni ...

Setting up factory externally in AngularJS can be accomplished by following a few simple

If I am developing a C# application using AngularJS, how can I set up a configuration object from the server side and inject it into a factory located in another .JS file? Is there a particular approach for achieving this task? Check out this JS fiddle e ...

Data structures of advanced complexity within HTML data attributes

I am delighted by the existence of the html5 data attribute. It's great to be able to input a plain string into html attributes and retrieve them using jquery. However, wouldn't it be wonderful to have more than just a basic string? Is there a ...

Spin the text inside an <li> element generated by JavaScript

I am currently working on a unique script designed to create a custom number of slices for a circle. The items in the circle are being displayed as shown in this generated circle image. This is the Javascript code I have been using: for () { men ...

Is there a way to position the menu above the button?

I need some help with my menu. Currently, it is showing up below the button and within my footer instead of above the content like I want it to. If anyone can assist me in understanding what I am doing wrong, I would greatly appreciate it. Thank you for ta ...

Encountering a Syntaxerror While Working with Vue.js Router and Parameters

As a newcomer to Vue Js, here is a snippet from my routes code: import Vue from 'vue'; import Router from 'vue-router'; import dashboard from './views/dashboard.vue'; import settings from './views/settings.vue'; co ...

Implementing pagination in Nuxt using asyncData

Wondering if it's possible to implement pagination using asyncData in Nuxt? Here is the code snippet I have: <template> <v-container fluid> <v-row> <v-col v-for="sessao in sessoes" :key=" ...

Replacing Handlebars with Angular in MEAN application

I'm currently developing a MEAN application with user authentication and I've decided to learn Angular while working on it. As part of my learning process, I recently updated the view files from .hbs to .html after removing the handlebars view en ...

When using Express, some static files may display raw code instead of rendering the intended HTML content

I am facing an issue with an anchor link in my layout.hbs file. The link is supposed to direct to layout2.hbs, but instead of rendering proper HTML, it displays a page of raw code. Upon checking my console messages, I can see the following: GET / 304 28. ...

Iterating through tables with Python's Selenium WebDriver using JavaScript

After working with Beautiful Soup for some time, I've realized its limitations when it comes to handling JavaScript. To bridge this gap, I turned to Selenium to enhance my toolbox. I've been attempting to scrape data from the site It's wort ...

What is the best way to modify tabulator styles?

Is there a way to update the column header in Tabulator using inline style when trying to avoid ellipsis as the column size is reduced? <VueTabulator ref="tabulator" v-model="receipts" :options="options" style="white ...

What is the best method for showcasing a nested JSON value?

I need to show the data for the month of April. Here is the code snippet: {{my_dates['2018-04-23']}} This code displays: { "april":0, "may":0, "june":0, "july":0, "august":0, "september":0, "october":0, "income_trips":" ...

Why isn't the maxlength attribute showing up in the rendered HTML code?

One of the elements in my project is a textbox with its text mode set to multiline, which essentially turns it into a textarea. Here's an example of how it looks: <asp:TextBox ID="txtFinBillingTerms" maxlength="500" runat="server" ToolTip="(e.g. 9 ...