How to use switch with special characters

Question

Suppose I have button like this:

<button>&divide;</button>

I want to use switch operator with string variable.

<!DOCTYPE html> 
<html lang="en">
<head>      
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>     
    <script type="text/javascript">

$(document).ready(function()
{  
  $("button").click(function(){
      var value=$(this).text();
      console.log(value);
    switch(value){

      case "÷":
         alert("OK");
         break;
      case "&divide;":
         alert("OK");
         break;
    }
  });   

}
);

    </script>   
</head>
<body>
<button>&divide;</button>
</body>
</html>

But none of those alerts appear on button click.console.log() shows:

"÷"

My browser - firefox 39.0.

[I can't reproduce the problem.](https://jsfiddle.net/5ebfy4wh/1/) — showdev, Aug 04 '16 at 17:31
Are you able to create a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) to help demonstrate the problem? The cause might be something other than the code you've shown here. — showdev, Aug 04 '16 at 17:41
I still can't reproduce the problem. It seems that you are getting the expected value in your console. Maybe you have [disabled alerts](http://stackoverflow.com/questions/21277406/javascript-why-sometimes-alert-does-not-work-but-console-log-does) in your browser? Or there's some code elsewhere on your website that is [overwriting the alert function](http://stackoverflow.com/questions/4388248/disable-alert#answer-4388291)? — showdev, Aug 04 '16 at 17:51
I checked settings - all fine. And I pasted the full copy of the page — kurumkan, Aug 04 '16 at 17:54

Hitmands · Answer 1 · 2016-08-04T18:12:28.633

Consider that Html Node Text isn't always a safe source of truth... A good choise could be putting some attribute that gives you the information that you need and use views only for data presentation...

function CheckBtnTextCtrl($) {
  let 
    $btns = $('button')
  ;
  
  function smartTextSanitization(text) {
    let decoder = document.createElement('textarea');
    decoder.innerHTML = text;
    
    return decoder.value;
  }
  
  function onBtnClick(event) {
    let 
      $btn = $(this),
      $btnText = $btn.text(),
      text = smartTextSanitization($btnText)
    ;
    
    switch(text) {
      case "÷":      
        console.log('it is division');
        break;
    }
  }
  
  $btns.click(onBtnClick);
}

jQuery(document).ready(CheckBtnTextCtrl);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>&divide;</button>

Good way (in my opinion):

function CheckBtnCtrl($) {
  const ACTION_TYPES = {
    "SUM": 1,
    "DIVIDE": 2
  };
  
  let $btns = $('button');
  
  function onBtnClick(event) {
    let 
      $btn = $(this),
      action = $btn.data('actiontype')
    ;
    
    switch(action) {
      case ACTION_TYPES.SUM:
        console.log('ok, we need to sum values');
        break;
        
      case ACTION_TYPES.DIVIDE:
        console.log('ok, we need to divide values');
        break;
    }
  }
  
  $btns.click(onBtnClick);
}
jQuery(document).ready(CheckBtnCtrl);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-actiontype="2">&divide;</button>

Might be a bit premature to be using `const` and `let` in examples, considering few mobile browsers support them: http://kangax.github.io/compat-table/es6/#test-let — Heretic Monkey, Aug 04 '16 at 18:18
I support your *alternative* method of using a [data attribute](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes). But, can you tell what's causing the OP's specific problem? — showdev, Aug 04 '16 at 18:19
The problem resides on the HTML Entities, as I said, they are not a safe source of truth... The example works only when you sanitize them (my first example), because you decode that HTML ENTITY. (when you query on dom... it can return an unicode, html entities, or something else depending on browser)... — Hitmands, Aug 04 '16 at 18:21
Thank you. Very interesting info. But where can I find more about such unreliability?Please, if you able, provide me some resources about it. It would be very kind of you — kurumkan, Aug 04 '16 at 18:43

How to use switch with special characters

1 Answers1