CODEWITHSUNDEEP
javascriptjquery
Jacob Baker
Jacob Baker

Reputation: 59

Switch statement in JavaScript function is not activating

I am trying to use a switch statement in a function, but it is not activating.

let thisFunction = function(index) {

  console.log(index);

  switch (index) {
    case 0:
      console.log('Home');
      break;

    case 1:
      console.log('About');
      break;

    case 2:
      console.log('Services');
      break;

    case 3:
      console.log('Portfolio');
      break;

    case 4:
      console.log('Contact');
      break;

    default:
      console.log('Default');
  }
};

$('nav ul li a').click(function() {
  let index = $(this).attr('data-btnIndex');
  thisFunction(index);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li>
      <a href="#" data-btnIndex="0">Home</a>
    </li>
    <li>
      <a href="#" data-btnIndex="1">About Us</a>
    </li>
    <li>
      <a href="#" data-btnIndex="2">Services</a>
    </li>
    <li>
      <a href="#" data-btnIndex="3">Portfolio</a>
    </li>
    <li>
      <a href="#" data-btnIndex="4">Contact</a>
    </li>
  </ul>
</nav>

When I run the code above and click a link, the console.log of "index" runs but the switch block does nothing.

If I define the index variable like in the example below, the switch works. But when I put the same code in the function, the switch stops working.

Example:

let index = 3;

console.log(index);
switch(index){
    case 0:
        console.log('Home');
    break;

    case 1:
        console.log('About');
    break;

    case 2:
        console.log('Services');
    break;

    case 3:
        console.log('Portfolio');
    break;

    case 4:
        console.log('Contact');
    break;

    default:
        console.log('Default');
}

This example returns "3" and "Portfolio" in the console, as it should.

Upvotes: 0

Views: 61

Answers (3)

CertainPerformance
CertainPerformance

Reputation: 370999

.attr returns a string. (Your manual snippet is defining index as a number, which is why its behavior is different) Either test cases against numeric strings like '0', or cast the index to a number first:

let thisFunction = function(index) {

  console.log(index);

  switch (index) {
    case 0:
      console.log('Home');
      break;

    case 1:
      console.log('About');
      break;

    case 2:
      console.log('Services');
      break;

    case 3:
      console.log('Portfolio');
      break;

    case 4:
      console.log('Contact');
      break;

    default:
      console.log('Default');
  }
};

$('nav ul li a').click(function() {
  let index = $(this).attr('data-btnIndex');
  console.log(typeof index);
  thisFunction(Number(index));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li>
      <a href="#" data-btnIndex="0">Home</a>
    </li>
    <li>
      <a href="#" data-btnIndex="1">About Us</a>
    </li>
    <li>
      <a href="#" data-btnIndex="2">Services</a>
    </li>
    <li>
      <a href="#" data-btnIndex="3">Portfolio</a>
    </li>
    <li>
      <a href="#" data-btnIndex="4">Contact</a>
    </li>
  </ul>
</nav>

Upvotes: 3

Code_Ninja
Code_Ninja

Reputation: 1877

Your code is perfectly fine, but there is only one minor issue, that prevents the correct output. Your switch is not stopping, its running perfectly, but the type of the value of the attribute data-btnIndex is string. So instead of case 0, you should write case '0', instead of case 1 you should write case '1' and so on.

Or you you can parse the value of data-btnIndex to Integer by the following method:

var index = parseInt(index);

I hope this helps.

Thanks.

Upvotes: 0

Ronnie Smith
Ronnie Smith

Reputation: 18595

<button> vs <a>. I recommend you stick with anchor for navigation bcs that's what it's made for. Re the dataset attributes you are using, they are not required. Simply use the innerHTML.toLowerCase() for your switch.

Regarding your issue, your page is navigating away before your script gets to handle the .click.

Simply add a CSS class to whatever you want in the page HTML anchor. In other words, in about.html have <a class="active-page">About</a>.

Upvotes: 0

Related Questions