Magento error TypeError: element is null in prototype.js after upgrade

Question

I'm having trouble with a Magento error and I've tried fixing it for hours now, but somehow I just can't figure it out.

My clients shop was running on Magento 1.4.1.1 and he wanted me to upgrade it to the most recent 1.9.2.2 (Community Edition). All worked out pretty well and the template looks as it should, but the checkout process just won't work and I really don't know why.

Everytime I put something in the cart and go to checkout, it brings me to the page where I can select to register or login or continue as guest. I choose continue as guest and click "next", but absolutely nothing happens.

The Firefox console is showing me the following error:

TypeError: element is null in prototype.js:1931

I've checked the .js file and can see at which point it uses an empty element, which is this:

hide: function(element) {
element = $(element);
   element.style.display = 'none';
return element;

So basically it tries to hide an object, which is null. The trouble is: I have no idea which file or causes the error and how to debug it. I've read multiple posts and I could only find one fitting post, which said there might be a closing tag missing for a head section somewhere. But there's just tons of files and I don't know where to look.

If anyone had a similar problem or knows where the issue might be, please share to help me resolve this.

Thanks for the help!

EDIT:

I've used firebug and was able to see what creates the error. Seems that there is a problem in my opcheckout.js. But that's a magento file which was not altered in any way and is in the skin/base/ folder.

The only thing I can think of is that they changed something there from v. 1.4.1.1 to 1.9.2.2 and I don't see it.

Here's the code from the opcheckout.js:

setMethod: function(){
    if ($('login:guest') && $('login:guest').checked) {
        this.method = 'guest';
        var request = new Ajax.Request(
            this.saveMethodUrl,
            {method: 'post', onFailure: this.ajaxFailure.bind(this), parameters: {method:'guest'}}
        );
        Element.hide('register-customer-password');
        this.gotoSection('billing', true);
    }

The error is created by "Element.hide('register-customer-password');".

Here's the code from my theme's billing.phtml where the div is located:

<li class="fields" id="register-customer-password">
                <div class="field">
                    <label for="billing:customer_password" class="required"><em>*</em><?php echo $this->__('Password') ?></label>
                    <div class="input-box">
                        <input type="password" name="billing[customer_password]" id="billing:customer_password" title="<?php echo $this->__('Password') ?>" class="input-text required-entry validate-password" />
                    </div>
                </div>
                <div class="field">
                    <label for="billing:confirm_password" class="required"><em>*</em><?php echo $this->__('Confirm Password') ?></label>
                    <div class="input-box">
                        <input type="password" name="billing[confirm_password]" title="<?php echo $this->__('Confirm Password') ?>" id="billing:confirm_password" class="input-text required-entry validate-cpassword" />
                    </div>
                </div>
            </li>

So in my eyes the element it tries to hide is there, I don't get why it says Element is null...

Any ideas?

Answer 1

Just test for the element's existence first, which will prevent an 'undefined' or 'null' error from being thrown:

if($(element)){
   element = $(element);
   element.style.display = 'none';
   return element;
}

$(element) is the equivalent of document.getElementById('' + element + '')