Jquery -> prototype translate

Question

Can anyone help me translate this to prototype

var btn = $('#onestepcheckout-button-place-order');
var btnTxt = $('#onestepcheckout-button-place-order span span span');

var fewSeconds = 10;

btn.click(function(){

    btn.prop('disabled', true);
    btnTxt.text('Even geduld A.U.B.');
    btn.addClass('disabled');

    setTimeout(function(){
        btn.prop('disabled', false);
        btnTxt.text('Bestelling plaatsen');
        btn.removeClass('disabled');


    }, fewSeconds*1000);

});

Prototype is confusing the sh*t out of me

Answer 1

Try this:

var btn = $('onestepcheckout-button-place-order');
var btnTxt = $$('onestepcheckout-button-place-order span span span')[0];

var fewSeconds = 10;

Event.observe(btn, 'click', function(){

    btn.setAttribute('disabled', 'disabled');
    btnTxt.innerHTML = 'Even geduld A.U.B.';
    btn.addClassName('disabled');

    setTimeout(function(){
        btn.removeAttribute('disabled');
        btnTxt.innerHTML = 'Bestelling plaatsen';
        btn.removeClassName('disabled');
    }, fewSeconds*1000);

});

I haven't tested it though.

Answer 2

I'm not going to give you the direct copypasta snippet for your problem but you only probably just need to do the following swaps:

• $(selector) with $($$(selector))
• prop to attr
• addClass to addClassName
• I'm omitting one more replacement so you can look for it yourself, for added challenge! Protip: search google for "Prototype to jQuery equivalent". So many resources!

Alternatively, you can just use jQuery in jQuery.noConflict mode and wrap the above in a jQuery closure.

(function($) {
    // your code above goes here.
})(jQuery)