Javascript if or switch statement to add a class

javascript switch multiple case
javascript switch case range
javascript switch string
javascript switch return
javascript switch multiple variables
switch statement javascript
arithmetic operations using switch case in javascript
switch(true javascript)

I am just trying to add a simple class to an element but I am not to sure if I would be better of using and if statement or switch. I have compiled below my code using an if statement but would appreciate some help on converting it to a switch for testing purposes.

if (currentSlide === 0) {
  slide.classList.add('class0');
} else if (currentSlide === 1) {
    slide.classList.add('class1');
  } else if (currentSlide === 2) {
      slide.classList.add('class2');
    }

use switch case:

switch (currentSlide) {
    case 0:
        slide.classList.add('class0');
        break;
    case 1:
        slide.classList.add('class1');
        break;
    case 2:
        slide.classList.add('class2');
        break;
    default:
        break;
}

OR:

slide.classList.add('class' + currentSlide);

OR: use an Array...

var classes = ["class0", "class1", "class2"]
slide.classList.add(classes[currentSlide]);

The JavaScript Switch statement makes complex decision logic easier to Switch statement is used as an alternate to multiple if .. else statements. This example will return an object with a different text message and CSS class. If a case does not include the break statement the next case is evaluated. In addition to ifelse, JavaScript has a feature known as a switch statement. switch is a type of conditional statement that will evaluate an expression against multiple possible cases and execute one or more blocks of code based on matching cases. The switch statement is closely related to a conditional statement containing many else if blocks, and they can often be used interchangeably.

As your code stands, the ideal solution will be:

slide.classList.add('class'+currentSlide);

But if you really want to the conversion of the if...else to switch:

switch (currentSlide) {
  case 0:
    slide.classList.add('class0');
    break;
  case 1:
    slide.classList.add('class1');
    break;
  case 2:
    slide.classList.add('class3');
}

The switch statement evaluates an expression, matching the expression's value to a case JavaScript will drop you back to the default if it can't find a match: It also works when you put default before all other case s. async function · block · break · class · const · continue · debugger · default · dowhile  The switch statement is a part of JavaScript's "Conditional" Statements, which are used to perform different actions based on different conditions. Use switch to select one of many blocks of code to be executed. This is the perfect solution for long, nested if/else statements. The switch statement evaluates an expression.

function addclass(class_nr) 


{Slide.classlist.add("class"+class_nr);} 

Try to use functions and their params as much as you can, it will make the code more readbale and you will be able to use the same code in multiple places

This will stop the execution of more execution of code and/or case testing inside the block. If break is omitted, the next code block in the switch statement is  If you only wish to add a CSS Class dynamically, you can use document.getElementById('the-element-s-id').className += 'the-desired-class'; If you want to only add the two ( left and top ), you can also use

Keyword JS Let JS Const JS Arrow Function JS Classes JS Debugging JS Style Guide Use the switch statement to select one of many code blocks to be executed. Note: If you omit the break statement, the next case will be executed even if the Create a switch statement that will alert "Hello" if fruits is "banana", and  If the expression matches the specified valueN, the statements inside the case clause are executed until either the end of the switch statement or a break. default Optional A default clause; if provided, this clause is executed if the value of expression doesn't match any of the case clauses. Description. A switch statement first evaluates its expression.

Use else if to specify a new condition to test, if the first condition is false; Use switch to select one of many blocks of code to be executed. Browser Support  Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. w3schools .com THE WORLD'S LARGEST WEB DEVELOPER SITE

I would probably add a class/something to use as a selector (in this case I added girls ) to make lookup easier. You can do this in other ways  If the equality is found, switch starts to execute the code starting from the corresponding case, until the nearest break (or until the end of switch). If no case is matched then the default code is executed (if it exists).

Comments
  • What have you tried in order to change this code to be based on a switch statement? What went wrong?
  • I mean, in this situation I'd just do slide.classList.add('class'+currentSlide)...
  • The way this is written I'd suggest slide.classList.add('class' + currentSlide) would be easier, and more concise than either an if or a switch.
  • Switch is practically always more performant (fact), and easier to read (opinion) but as others have pointed out, would be easier and simpler to just use the iteration for what it is..