ASCII Symbol not being registered by .html()

Question

I have this function here that toggles between different ASCII symbols (&oplus; (⊕) and &ominus (⊖) specifically) on click. What I can't figure out is after it changes to ⊖ it wont change back. Anyone know why?

This generates the table row

"<tr><td>Other</td><td>" + stats.others.length + <span class='displaybutton' style='cursor:pointer;'>&oplus;</span></td></tr>";

The important part being this <span>

<span class='displaybutton' style='cursor:pointer;'>&oplus;</span>

This is supposed to switch between the symbols

$('.displaybutton').click(function(){
    $('#otherResponseList').toggle(); 
    if($(this).html() == '&ominus;'){
        $(this).html('&oplus;');
    } else {
        $(this).html('&ominus;');
    }
});

LS_ᴅᴇᴠ · Answer 1 · 2017-02-23T23:25:44.477

2

Those two symbols are not ASCII. They are HTML entities and belong to Unicode character set. They do not belong to ASCII character set.

Comparing html representation of HTML entities may be tricky. They may be represented by entity, but may also be converted to corresponding Unicode character. Solution is consider result, this is, text content. Text content may be easily manipulated using jQuery.text() and Unicode codepoints to ominus (0x2296) and oplus (0x2295):

$('.displaybutton').click(function(){
    $('#otherResponseList').toggle(); 
    $(this).text($(this).text()=='\u2296'?'\u2295':'\u2296');
});

edited Feb 23 '17 at 23:25

answered Feb 23 '17 at 23:10

LS_ᴅᴇᴠ

10,823
1
23
46

1

In this example `html()` and `text()` are actually interchangeable. The `text()` function will indeed strip html tags, but there are none within the selected element. Otherwise I think using the unicode representations here is the more reliable way to do this. – abigperson Feb 23 '17 at 23:20
@PJSantoro You're right! Thought `html` handling outter html, but inner is used... I'll correct my answer thanks! – LS_ᴅᴇᴠ Feb 23 '17 at 23:23
Yep. ASCII doesn't have anything to do with HTML, nor JavaScript. – Tom Blodget Feb 23 '17 at 23:28

score 1 · Answer 2 · edited May 23 '17 at 11:53

1

The designations &oplus; & &ominus; are HTML entity codes that HTML uses to represent different unicode codepoints. Since your JS code is most likely UTF-8 you can test against the character directly.

You can use the code below to accomplish what you are trying to do. If you want to encode/decode the HTML entity codes have a look at this SO Post

$('.displaybutton').click(function(){
    if($(this).html() != '⊕'){
        $(this).html('&oplus;');
    } else {
        $(this).html('&ominus;');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='displaybutton' style='cursor:pointer;'>&oplus;</span>

edited May 23 '17 at 11:53

Community

1
1

answered Feb 23 '17 at 23:02

abigperson

5,252
3
22
25

Thanks for your help! The problems seems to be that the symbol only switches every 2 clicks now, haha. I'm editing in VIM if that makes a difference. – B Johnson Feb 23 '17 at 23:05
Little correction: UTF-8 is a representation of Unicode codepoints. HTML entities map Unicode codepoints. – LS_ᴅᴇᴠ Feb 23 '17 at 23:13
@LS_dev thanks, that is correct! you're answer is a better solution, +1 – abigperson Feb 23 '17 at 23:14

score 1 · Answer 3 · answered Feb 23 '17 at 23:05

You can flag it with data-attribute and compare with that instead of of the value within the element.

<div>
  <span id="icon" data-id="plus">&oplus;</span>
</div>
<button id="change">change</button>

$(document).ready(function() {
  $('#change').on('click', function() {
    if ($('#icon').attr('data-id') === "plus") {
      $('#icon').attr('data-id', "minus");
      $('#icon').html('&ominus;');
    } else {
      $('#icon').attr('data-id', "plus");
      $('#icon').html('&oplus;');

  });
});

score 0 · Answer 4 · answered Feb 23 '17 at 23:13

Maybe use classes and swap those instead of checking for the element's html:

HTML:

<span class='displaybutton minus' style='cursor:pointer;'></span>

CSS:

.displaybutton.minus:before {
  content: '\2296';
}

.displaybutton.plus:before {
  content: '\2295';
}

JavaScript:

$('.displaybutton').click(function(){
    $('#otherResponseList').toggle(); 
    $(this).toggleClass('plus');
});

https://jsfiddle.net/ncprLej3/

ASCII Symbol not being registered by .html()

4 Answers4