Comparing a Text Element and a String

Comparing a Text Element and a String

I'm struggling to understand where I'm going wrong. I'm using a draggable/droppable element and I'm extracting the <p> tag value using:

var rightNumber = ui.draggable.text();

and assigning it to the variable rightNumber. The value of the <p> tag is set to '4' (but can be changed dynamically). I want to use an if/else statement to compare the value of rightNumber with the value extracted from the <p> tag but it always defaults to false, irrespective of whether rightNumber actually equals "4". Running these two lines tells me the variable rightNumber is a string and its value is 4...
  1. alert($.type(rightNumber));
    alert(rightNumber);
but running the if/else statement below always reverts to false. My understanding is that this is likely because I'm not actually comparing two strings, as both elements are objects?

I've tried every possible combination of if((rightNumber === "4") {

I can think of but to no avail. What am I doing wrong?

  1. if(rightNumber == "4") {
  2. if(rightNumber === "4") {
  3. if(String(rightNumber) === String("4")) {


HTML Code

  1. <div id="a2" class="answerCard">
                    <p class="noselect">4</p>
                </div>

jQuery Code

  1. $(document).ready(function() {
       
        $(".answerCard").draggable();
           
        $(".dropRight").droppable({
            drop: function(event, ui) {
            $(ui.draggable).detach().css({top: 0, left: 750}).appendTo(this);
               
            var rightNumber = ui.draggable.text();
               
            alert("The Number on the Right = " + rightNumber);
               
                if(String(rightNumber) === String("4")) {
                    alert("Correct Answer!");           
                }
                else {
                    alert("Incorrect Answer!");
                }
            }
        });