onclick assignment vs init assignment discrepency

Question

Updated: Narrowed this down even further eliminating the aspx JavaScript reference. So it's down to this...if I uncomment the 1 line inside the init and remove the click event it behaves as expected. However, if I put the assignment statement inside my button click event I get the incorrect behavior as shown way down below.

<script type="text/javascript">
    var pageDefault = {
        btn1: document.getElementById('Button1'),
        tdtarget: document.getElementById('targetTD'),
        bg: document.getElementById('txtBGColor'), //jscolor textbox
        init: function() {
            //pageDefault.bg.value = pageDefault.tdtarget.getAttribute('bgcolor'); 
            this.btn1.onclick = function() {
                pageDefault.bg.value =
                    pageDefault.tdtarget.getAttribute('bgcolor');
            }
        }
    }
    pageDefault.init();

I am using jscolor. I am experience 2 different behaviors, one of which I don't understand.

All I'm trying to do is get the background color from a <TD> element of a <Table> and show the color value in a jscolor textbox.

Answer 1

Found it on their website. I did look at it before but just had to narrow it down this far. Thanks for feedback and time (views).

pageDefault.bg.color.fromString('ffcc99');