'undefined' is not an object

Question

I have a div that looks like this:

<em id="ProductPrice" class="ProductPrice VariationProductPrice">$75.00</em>

And I need to make the color of the text change color if there is a change to it's value.

I wrote this:

<script>

$(document).ajaxSuccess(function(){

    var currentPrice = $.trim($("#ProductPrice").text());

    if(currentPrice == "%%GLOBAL_ProductPrice%%") 
    {
            $("#ProductPrice").style.color="black";
            console.log("black");
    }
    else
    {
            $("#ProductPrice").style.color="red";
            console.log("red");
    }

});

%%GLOBAL_ProductPrice%% is a variable in our CMS that gives the base value before any change occurs.

I get the error 'undefined' is not an object (evaluating '&("#ProductPrice").style.color="red"')

What am I doing wrong?

Answer 1

You are using jQuery selectors in plain Javascript, won't work. In javascript you can change the property style, in jQuery you have a method .css() to do this.

Try this instead:

$("#ProductPrice").css('color','black');

or plain javascript

document.getElementById('ProductPrice').style.color="black";