Uncaught TypeError: $ is not a function

Question

A function is created to be called when a change event occurs on a span tag as seen in the code snippet below.

$(".price-box").on("change", ".normal-price .price-wrapper span.price", function() {
  console.log('Hello, I am happy to be called');  
  // Get the value of the span element
  var price = $(".price-box .normal-price .price-wrapper span.price").html();

  // Clean and Convert the value to cents
  var priceCents = parseInt(parseFloat(price.replace(/[^\d.]/g,'')) * 100);

  // If value is different from existing Klarna product placement value, update it.
  // and then call Klarna with refresh-event to refresh the placement.
  var oldPurchaseAmt = $(".product-add-form klarna-placement").attr("data-purchase-amount");
  if (priceCents != oldPurchaseAmt) {
    $(".product-add-form klarna-placement").attr("data-purchase-amount", priceCents);

    // Trigger event to refresh
    window.KlarnaOnsiteService = window.KlarnaOnsiteService || [];
    window.KlarnaOnsiteService.push({ eventName: 'refresh-placements' });
  }
});

Below is the complete JS file including the above code snippet.

function get_pmm_shipping_text() {
    var v_text = "",
    exceptions="MB TB OM",
    notFree="BB,LC,TB,JA,MD",
    ship_info="",cost="",free="",p=0,
    little_truck= '<img src="https://images.perfectshoppers.com/4b15739013799.png" class="altattr"  alt="Free Shipping">';
    // NOTE:  pmm_vendor_code, pmm_sku and  pmm_price are pre-existing variables
    console.log("Vendor Code=" + pmm_vendor_code + ", SKU=" + pmm_sku + "Price=" + pmm_price);

    notFree.indexOf(pmm_vendor_code)>-1 ? free="" : free = "FREE,"; // if prefix not in "notFree" variable, shipping is FREE regardless of price.
    pmm_price > 49 ? free="FREE," : free="" ; // everything over $49 ships free.
    // thresh>"" && netprice<thresh ? free="" : ''; // below shipping threshold nullifies free shipping  (thresh and netprice are not defined)
    pmm_vendor_code == "E2" ? free = "FREE," : "";  // forces FREE for E2 (Electric Mirror alternate vendor code)

    switch(pmm_vendor_code){  // exceptions items to vendor Free or Not-Free
        case "BB" : pmm_sku == "BB01" ? free = "FREE," : '' ;
        case "JA" : pmm_price > "32" ? free = "FREE," : '';
        case "MD" : pmm_price > "32" ? free = "FREE," : '';
        case "LC" : pmm_price > "57" ? free = "FREE," : '';
    }

    // REMEMBER free (lower case) is a variable
    cost = "In stock! &nbsp;Shipped "+free+" usually on the ";
    switch (pmm_vendor_code){
        case "AB" : ship_info=cost+"1<sup>st</sup> or 2<sup>nd</sup> " ; break; // Amba
        case "AG" : ship_info=cost+"1<sup>st</sup> or 2<sup>nd</sup> " ; break; // alkaglam
        case "AY" : ship_info=cost+"2<sup>nd</sup> to 4<sup>th</sup> "; break; // ayurderm
        case "BB" : ship_info=cost+"next " ; break; // NOT free -butterbabes
        case "CL" : ship_info=cost+"2<sup>nd</sup> to 4<sup>th</sup> " ; break; // clear mirror
        case "CB" : ship_info=cost+"same or next "; break; // cannaBon
        case "CP" : ship_info=cost+"1<sup>st</sup> or 2<sup>nd</sup> " ; break;  // contrapac
        case "CY" : ship_info=cost+"same or next " ; break;  // cyberderm
        case "DB" : ship_info=cost+"same or next " ; break; // Dear by Renee
        case "DN" : ship_info=cost+"next " ; break;  // dia naturals
        case "E2" : ship_info=cost+"6<sup>th</sup> to 8<sup>th</sup> " ; break; // electric mirror backlit mirrors
        case "E3" : ship_info=cost+"3<sup>rd</sup> to 6<sup>th</sup> " ; break; // electric mirror Cordova brand
        case "EM" : ship_info=cost+"2<sup>nd</sup> to 4<sup>th</sup> " ; break; // electric mirror
        case "FS" : ship_info=cost+"2<sup>nd</sup> " ; break; // foster and lake
        case "GH" : ship_info=cost+"1<sup>st</sup> or 2<sup>nd</sup> " ; break; // stan pardente ghd
        case "HR" : ship_info=cost+"same or next "; break; // hair restoration
        case "JA" : ship_info=cost+"same or next " ; break;  // JAVA skin care
        case "JD" : ship_info=cost+"2<sup>nd</sup> ";break; // Jerdon
        case "KY" : ship_info=cost+"1<sup>st</sup> or 2<sup>nd</sup> "; break;  // kimball & young / aptations
        case "LC" : ship_info=cost+"same or next "; break;  // l.a. christine
        case "LU" : ship_info=cost+"same or next "; break;  // luce skincare
        case "LW" : ship_info=cost+"1<sup>st</sup> or 2<sup>nd</sup> " ; break; // stemulation
        case "MD" : ship_info=cost+"1<sup>st</sup> or 2<sup>nd</sup> "; break; // MDSolarSciences
        case "MH" : ship_info=cost+"2<sup>nd</sup> to 3<sup>rd</sup> " ; break; // more hair naturally
        case "MY" : ship_info=cost+"2<sup>nd</sup> to 3<sup>rd</sup> " ; break; // marcus york
        case "RE" : ship_info=cost+"same or next "; break; // replete skincare
        case "NO" : ship_info=cost+"same or next "; break; // gentleman's foundry
        case "SK" : ship_info=cost+"next " ; break; // skin triks
        case "SQ" : ship_info=cost+"same or next " ; break; // skintifique
        case "SY" : ship_info=cost+"2<sup>nd</sup> or 3<sup>rd</sup>" ; break; // shunly
        case "TB" : ship_info=cost+"2<sup>nd</sup> or 3<sup>rd</sup>" ; break; // to bee products
        case "TH" : ship_info=cost+"1<sup>st</sup> or 2<sup>nd</sup> " ; break; // thalgo
        case "UC" : ship_info=cost+"2<sup>nd</sup> to 4<sup>th</sup>";break; // upper canada (danielle creations)
        case "VT" : ship_info=cost+"next " ; break;  // vintage traditions
        case "xx" : ship_info=cost+"same or next"; break; // pmm inventory product
    }
    console.log("Ship Info=" + ship_info);

    if (exceptions.indexOf(pmm_vendor_code)==-1){ // if vendor is not in the exceptions string  use the cases above
            if (free=="FREE," || pmm_vendor_code == "E2"){ // display the little truck // E2 to force it for E2 - doesn't work otherwise
                v_text = little_truck + ' &nbsp;<strong>' + ship_info + ' business day.</strong>';
            } else { // no little truck
                v_text = '<strong> ' + ship_info +' business day.</strong>';
            }
    } else { // following vendors are in the exceptions string
        switch (pmm_vendor_code){
            case "MB" : v_text = '<span style="color:#A300FC;font-size:1.1em;font-weight:bold" >'+little_truck+' &nbsp;Shipped FREE, directly to you via <span style="color:#FF0000">FedEx International Express</span> in about 14-21 days, directly from Paris, France.</span>'; break; // miroir brot
            case "OM" : v_text = '<span style="font-size:1.1em;font-weight:bold">'+little_truck+' 8 oz. size ships FREE.<br />Also shipped FREE: &nbsp;2 oz. size purchased together with 8 oz. size - or - 3 or more 2 oz. size.<br /><br />Shipment is from Canada after 1 business day. &nbsp;Time in transit to locations in the continental US is 3 to 5 business days.</span>'; break;  // oil me north
            case "TB" : v_text = '<span style="font-size:1.1em;font-weight:bold">Ships FREE when purchased together with ToBee 3-Pack</span>'; break;  // to bee products
        }
    }
    console.log("V Text=" + v_text);
    return v_text;
} // end of get_pmm_shipping_text()

// ---------------------------------  miroir brot vacation -------------------------------------------------------- 

    /*if(docloch.indexOf("miroir-brot")>-1){
            var brot_start = new Date(2019,06,28),
                brot_end = new Date(2019,07,30);
            if (today_date => brot_start && today_date <= brot_end){
                $(".product-name").after('<div id="brot_vacation" style="text-align: left;font-size: large; color: #9900ff;">Miroir Brot will be CLOSED for summer vacation from August 5th through August 30th.<br /><br /><strong>Order by <span style="color: #ff0000;">Thursday, July 25th</span> for shipment before vacation closing.</strong><br /><br />Orders placed after July 25th will be shipped after August 30th.</div>');
            }
    } */

// Normally add the bind to a parent which will be stable.
$(".price-box").on("change", ".normal-price .price-wrapper span.price", function() {
  console.log('Hello, I am happy to be called');  
  // Get the value of the span element
  var price = $(".price-box .normal-price .price-wrapper span.price").html();

  // Clean and Convert the value to cents
  var priceCents = parseInt(parseFloat(price.replace(/[^\d.]/g,'')) * 100);

  // If value is different from existing Klarna product placement value, update it.
  // and then call Klarna with refresh-event to refresh the placement.
  var oldPurchaseAmt = $(".product-add-form klarna-placement").attr("data-purchase-amount");
  if (priceCents != oldPurchaseAmt) {
    $(".product-add-form klarna-placement").attr("data-purchase-amount", priceCents);

    // Trigger event to refresh
    window.KlarnaOnsiteService = window.KlarnaOnsiteService || [];
    window.KlarnaOnsiteService.push({ eventName: 'refresh-placements' });
  }
});

define([
    'jquery',
    'domReady!'
], function($) {
    var docloch=document.location.href,new_title="";

    // Commented out as the Tab is not opening by default.
    // $("#tab-label-product.info.description").click();
    setTimeout(function() {
        $("#pmm_shipping").html('<br><div style="margin:-40px 0 15px">'+get_pmm_shipping_text()+'</div>');
    }, 750); // end of setTimeout

    // make the word CLOSEOUT red on product pages
    if ($("h1").text().indexOf("CLOSEOUT!")>-1 || $("h1").text().indexOf("OPEN BOX!")>-1){
        var newT= $("h1").html();
        newT = newT.replace("CLOSEOUT!",'<span style="color:#FF0000">CLOSEOUT!</span>');
        newT = newT.replace("OPEN BOX!",'<span style="color:#FF0000">OPEN BOX!</span>');
        $("h1").html(newT);
    }   


}); // end of $ function

Could you please point out the mistake being present which triggers Uncaught TypeError: $ is not a functionThank you.

Answer 1

try this

define([
    'jquery',
    'domReady!'
], function($) {
// Normally add the bind to a parent which will be stable.
$(".price-box").on("change", ".normal-price .price-wrapper span.price", function() {
  console.log('Hello, I am happy to be called');  
  // Get the value of the span element
  var price = $(".price-box .normal-price .price-wrapper span.price").html();

  // Clean and Convert the value to cents
  var priceCents = parseInt(parseFloat(price.replace(/[^\d.]/g,'')) * 100);

  // If value is different from existing Klarna product placement value, update it.
  // and then call Klarna with refresh-event to refresh the placement.
  var oldPurchaseAmt = $(".product-add-form klarna-placement").attr("data-purchase-amount");
  if (priceCents != oldPurchaseAmt) {
    $(".product-add-form klarna-placement").attr("data-purchase-amount", priceCents);

    // Trigger event to refresh
    window.KlarnaOnsiteService = window.KlarnaOnsiteService || [];
    window.KlarnaOnsiteService.push({ eventName: 'refresh-placements' });
  }
});
});

Use imperative notation in the PHTML template to include raw JavaScript code on the pages to execute specified business logic. This method uses the tag without the type="text/x-magento-init" attribute as shown in the following example:

<script>
require([
    'jquery'
], function ($) {
    $(function () { 

    // Write code here

    });
});
</script>

In a similar way, you can initialize any JS component that a returns callback function accepting a config object and element (a DOM node).

For example:

define ([
    'jquery'
], function ($) {
    $(function () { 

     // Write code here

    });
});