What is causing the "else" to activate in this particular if-else scenario?

I have implemented a method in Vue that toggles the darkMode variable when clicked. However, I'm facing an issue where it always triggers both the if and else parts of the method.

data(){
    return{
      darkMode:false,
    }
  },
methods:{
darkModeToggle(){
  if(this.darkMode == false)
  {
    console.log("should be dark")
    this.darkMode = true
  }
  else(this.darkMode == true)
  {
    console.log("should be light")
    this.darkMode = false
  }
}
}

The expected output is for the first click to log "should be dark" and the second click to log "should be light". However, it is currently triggering both log statements on each click.

I am aware that it works correctly with "else if", but I'm confused as to why it doesn't work this way.

Answer №1

Keep it straightforward

An 'else' statement cannot contain conditions within it It needs to be structured like this

if(condition) {
} else {
}

If you wish to achieve a specific result, utilize 'else if' The format should be as follows

if(condition) {
} else if(another_condition) {
}

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

What could be causing the React state (array) to be empty within a callback function? Why is it failing to utilize the latest value from the external

I'm facing a challenge that has me stumped. I am attempting to add values to an existing array, but for some reason, the 'state' variable is always empty inside the onmessage callback function. I can't seem to figure out why this is hap ...

The Nextjs Image was preloaded using link preload, but it remained unused after a short period following the window's load event

I've encountered an issue while working with Next.js, a React-based framework. I am attempting to display the logo.png image using the Image component provided by Next.js. My image is stored in this folder: public/img Here is the code I'm using ...

Is it possible for you to generate an array containing only one element?

I've encountered an issue with my code. It functions correctly when the JSON data for "Customers" is in array form. However, if there is only one customer present, the code erroneously creates 11 table columns (corresponding to the number of keys in t ...

The Static Interface Binding in TypeScript

I have inquired about how to extend the static functionality of existing objects in JavaScript (using TypeScript). In all examples provided here, I am utilizing Object The code below showcases a polyfill definition for ECMAScript's Object.is function ...

Encountering issues with binding collections using Vuefire and Firebase

Currently, I am developing a web application using VueFire along with Firebase as the backend. Within my Realtime Database, I have organized data into two collections: cities:{ 0: { name: Berlin, c ...

Validation of decimal numbers in JavaScript without the presence of any other characters

Looking to create a JavaScript regex to validate an 8-digit number that may include decimals. The current regex /^\d+$/ allows for any other characters such as ( , * $ etc. How can I modify this to only accept numbers and periods? For example, the nu ...

Updating the status of a 2D array with N elements in React: A step-by-step guide

Before I dive into the topic, I must acknowledge that I have come across questions similar to this one before but was unable to find a solution on my own. Updating React state as a 2d array? Let's imagine this as my state object state = { graph ...

Utilize ASP.Net to Retrieve and Showcase RSS Feeds

Looking to read and display a specific feed on my website. Developed in C# using .NET 2. Attempted to follow this tutorial: Encountered the following error: A column named 'link' already belongs to this DataTable: cannot set a nested table n ...

Is it possible that the rotation of multiple images using jquery in php is not functioning properly?

Is there a way to display images using PHP and rotate them using canvas and jQuery? The issue arises when showing more than one image as the rotation fails. I suspect the problem lies in the image or canvas ID in the JavaScript code, but I'm unable to ...

How to keep the button on the page while using router-link in Vue 2?

I'm encountering an issue with my router-link in Vue 2. Within my parent component, I have a button that redirects users to a Create Post form when clicked. However, once redirected, the button remains visible in the Create Post form. How can I resolv ...

What is the process for utilizing node modules within the Alexa Developer Console?

Struggling with creating an Alexa skill that utilizes a Node.JS API with a module requiring npm installation? Unable to upload the node modules due to the absence of an upload button and console for npm install? Seeking guidance on how to proceed? ...

Exploring the functionality of $timeout in AngularJS

Can you explain the functionality of $timeout in AngularJS and how it sets itself apart from traditional setTimeout()? ...

Plotting Data Points with Tags in React Native

After doing some research, I came across a few React Native packages that offer scatter plots such as react-native-scatter-chart, react-native-chart-kit, and react-native-chartjs. However, I am interested in finding something more customizable. I'm s ...

Utilize a locally stored VueJs file rather than importing it from an external source

Starting my journey with VueJs using single file application has been quite interesting. Initially, I had everything in a single html page with both javascript and CSS styles embedded within it. To avoid fetching VueJs features online, I downloaded the V ...

An array of dictionaries that are the same except for one dictionary containing an unspecified key

A while ago, I wrote some sample code to generate Euler diagrams from an array of dictionaries. Strangely enough, it only works when the array is explicitly defined in my .js file; using input from a .json file to construct it incrementally does not yield ...

Reload the precise URL using JavaScript or jQuery

I need a solution to refresh the current URL after an ajax success. I attempted the following methods: location.reload() history.go(0) location.href = location.href location.href = location.pathname location.replace(location.pathname) However, I encounter ...

Utilize AxiosAbstraction to transmit a Patch request from a Vue.js application to a PHP backend

I need help with sending a PATCH request to update the birthdate of a user (promotor) from Vue.js frontend to PHP backend. The issue I'm facing is that the new date of birth is not getting saved in the database, and the existing date of birth in the d ...

Leveraging ES6 Generators for Efficient XMLHttpRequests

My goal is to simplify AJAX calls using ES6 generators, but I've encountered some issues: let xhr = new XMLHttpRequest() function *statechange() { yield xhr.readyState; } let gen = statechange(); xhr.open("GET", myUrl, true); xhr.onreadystatec ...

Organize all ngDialog instances within a factory and access them through a directive

In order to keep the ngDialogs centralized in one place instead of dispersed, I had the idea of creating a factory named modal.js. This factory would contain a list of all the modals with a switch statement. Here is an example: .factory(&ap ...

Is it necessary for every imported array in Vue.js to be reactive?

After bringing in a basic array of 4 strings named QUIZ_DATA into my Vue.js component: ["Question1?", "Question number 2?", "This is number 3!", "And # 4"] These questions are fixed and won't be altered. They d ...