cannot read property 'get' of undefined prototype.js when using below code in size_chart extension?

Question

I'm using size_chart extension, there is code in its phtml, but its conflicting with prototype js. Here is the error in my browser console on product view page.

prototype.js:5557 Uncaught TypeError: Cannot read property 'get' of undefined

Below is the js code on that phtml.

document.observe("dom:loaded", function () {
    Event.observe('sizechartbutton', 'click', showModal);
    var sizeChartObject = new sizeChart('sizechart_form');
    $('convertsizeunits').on('click', function (event) {
        sizeChartObject.changeUnits();
        Event.stop(event);
    });
    new Form.Observer('sizechart_form', 0.5, function () {
        sizeChartObject.findSize();
    });
});
var closeModal = function (e) {
    if (!e.target.descendantOf('sizechart')) {
        $('sizechartbox').removeClassName('_show');
        $('modals-overlay').remove();
    }
};
var showModal = function (event) {
    Event.stop(event);
    $('sizechartbox').addClassName('_show').setStyle({
        'z-index': '900'
    });
    $$('.modals-wrapper')[0].insert('<div id="modals-overlay" class="modals-overlay" style="z-index: 899;"></div>');
    Event.observe('sizechartbox', 'click', closeModal);
};

Answer 1

Please check "sizechartbutton" this element exist or not in your page.Because it can't find your element .