Tech Off Thread

18 posts

Forum Read Only

This forum has been made read only by the site admins. No new threads or comments can be added.

More ECMAScript fun!

Back to Forum: Tech Off
  • User profile image
    W3bbo

    Behold:

    Part of an ASPX page:


    <h3>Content</h3>
    <script type="text/javascript" src="Write.aspx.js"></script>
    <div id="divTxaTools"></div>
    <textarea cols="120" rows="20" id="txaContent" runat="server"></textarea>

    The referenced ECMAScript file:

    var txaTools;
    var txaContent;

    var btnHeightInc, btnHeightDec, btnWidthInc, btnWidthDec;

    window.onload = function() {

    txaTools = document.getElementById("divTxaTools");
    txaContent = document.getElementById("txaContent");

    btnHeightInc = document.createElement("button");
    btnHeightDec = document.createElement("button");
    btnWidthInc = document.createElement("button");
    btnWidthDec = document.createElement("button");

    btnHeightInc.innerHTML = "Increase Height";
    btnHeightDec.innerHTML = "Decrease Height";
    btnWidthInc.innerHTML = "Increase Width";
    btnWidthDec.innerHTML = "Decrease Width";

    btnHeightInc.type = "button";
    btnHeightDec.type = "button";
    btnWidthInc.type = "button";
    btnWidthDec.type = "button";

    btnHeightInc.onclick = HeightIncrease();
    btnHeightDec.onclick = HeightDescrease();
    btnWidthInc.onclick = WidthIncrease();
    btnWidthDec.onclick = WidthDecrease();

    txaTools.appendChild(btnHeightInc);
    txaTools.appendChild(btnHeightDec);
    txaTools.appendChild(btnWidthInc);
    txaTools.appendChild(btnWidthDec);

    }

    function HeightIncrease() {
    txaContent.Rows = txaContent.Rows + 1;
    }
    function HeightDescrease() {
    txaContent.Rows = txaContent.Rows - 1;
    }
    function WidthIncrease() {
    txaContent.Cols = txaContent.Cols + 1;
    }
    function WidthDecrease() {
    txaContent.Cols = txaContent.Cols - 1;
    }

    Question:

    Why does Firefox 1.5 report no errors and IE6 report it's equivalent of an NRE on line 21 but not on line 16?

    Firefox renders the buttons fine, but clicking them causes nothing, no errors show up in the console either.

  • User profile image
    Maurits

    Here's a fixed version.

    Case sensitivity is important to Firefox.

    There's no such attribute as "type" on a <button>, which broke IE.


    <h3>Content</h3>
    <div id="divTxaTools">&nbsp;</div>
    <textarea cols="60" rows="20" id="txaContent"></textarea>

    <script>
    var txaTools;
    var txaContent;

    var btnHeightInc, btnHeightDec, btnWidthInc, btnWidthDec;

    window.onload = function() {

        txaTools = document.getElementById("divTxaTools");
        txaContent = document.getElementById("txaContent");
       
        btnHeightInc = document.createElement("button");
        btnHeightDec = document.createElement("button");
        btnWidthInc  = document.createElement("button");
        btnWidthDec  = document.createElement("button");
       
        btnHeightInc.innerHTML = "Increase Height";
        btnHeightDec.innerHTML = "Decrease Height";
        btnWidthInc.innerHTML  = "Increase Width";
        btnWidthDec.innerHTML  = "Decrease Width";
       
    //    btnHeightInc.type = "button";
    //    btnHeightDec.type = "button";
    //    btnWidthInc.type  = "button";
    //    btnWidthDec.type  = "button";
       
        btnHeightInc.onclick = HeightIncrease;
        btnHeightDec.onclick = HeightDescrease;
        btnWidthInc.onclick  = WidthIncrease;
        btnWidthDec.onclick  = WidthDecrease;
       
        txaTools.appendChild(btnHeightInc);
        txaTools.appendChild(btnHeightDec);
        txaTools.appendChild(btnWidthInc);
        txaTools.appendChild(btnWidthDec);
       
    }

    function HeightIncrease() {
        txaContent.rows = txaContent.rows + 1;
    }
    function HeightDescrease() {
        txaContent.rows = txaContent.rows - 1;
    }
    function WidthIncrease() {
        txaContent.cols = txaContent.cols + 1;
    }
    function WidthDecrease() {
        txaContent.cols = txaContent.cols - 1;
    }
    </script>

  • User profile image
    W3bbo

    Maurits wrote:
    Here's a fixed version.

    Case sensitivity is important to Firefox.


    Thanks, where did I slip up?

    Maurits wrote:
    There's no such attribute as "type" on a <button>, which broke IE.


    Yes there is. I set the type to "button" to prevent Firefox treating it as a form submit button.

  • User profile image
    Maurits

    Re: case sensitivity:
    .rows != .Rows
    .cols != .Cols

    Re: <button type=button>... Well, I learned something new today. Smiley But if you uncomment those ".type = 'button'" lines, IE doesn't work anymore.

    Also, onclick takes functions, not the returned value of a function call... .onclick = HeightDecrease; rather than .onclick = HeightDecrease();

    (I think onclick can take strings too, but I'm not sure.)

  • User profile image
    W3bbo

    Maurits wrote:
    Re: case sensitivity:
    .rows != .Rows
    .cols != .Cols

    Re: <button type=button>... Well, I learned something new today. Smiley But if you uncomment those ".type = 'button'" lines, IE doesn't work anymore.


    I fixed it by doing this:

    
    if(!document.all) {
        btnHeightInc.type = "button";
        etc...
    }
    
    

  • User profile image
    Maurits

    I see, the default action for a <button> is to submit the form!  That's nasty.

    If you make your onclick functions return false, would that cancel the click, and therefore the submit?

  • User profile image
    W3bbo

    Maurits wrote:
    I see, the default action for a <button> is to submit the form!  That's nasty.

    If you make your onclick functions return false, would that cancel the click, and therefore the submit?


    I'm too tired to experiment, it works now and I'm in no mood to change it Tongue Out

  • User profile image
    Maurits

    MSDN article on <button>'s type attribute... IE does recognize it, but there are two caveats:

    1) The property is read-only... no changing it from the DOM.
    2) The default value is not type="submit", but type="button".

    The first caveat is a minor annoyance.
    The second caveat is an out-and-out violation of the spec.

    Perhaps something like
    if (b.type != "button") { b.type = "button"; } // stupid IE makes this read-only

    is the safest way to go?

  • User profile image
    Maurits

    Went to add this issue to the IE Feedback Wiki but it's already there:

    The default type value of <button> should be submit in IE 6, not "button". Submit is the default value for <button> in HTML 4.01 spec. 'submit: Creates a submit button. This is the default value.'

  • User profile image
    ZippyV

    Have your tried:

    object.setAttribute("type", "button");

  • User profile image
    Sven Groot

    Maurits wrote:
    I see, the default action for a <button> is to submit the form!  That's nasty.

    If you make your onclick functions return false, would that cancel the click, and therefore the submit?


    No. There's a way to cancel the default action from script, but unfortunately it's not that simple. Actually, there's two ways: the standard way and the IE way. The standards way you have to call event.preventDefault(), the IE way you have to set event.returnValue = false. I usually do this:

    if( typeof(event.preventDefault) == "function" )
       event.preventDefault();
    else
       event.returnValue = false;

  • User profile image
    PaintedBlue

    W3bbo wrote:
    Behold:


    The referenced ECMAScript file:


    btnHeightInc.onclick = HeightIncrease();
    btnHeightDec.onclick = HeightDescrease();
    btnWidthInc.onclick = WidthIncrease();
    btnWidthDec.onclick = WidthDecrease();


    Are you sure that you want to call these methods here? You should remove the () from these if you want to assign the functions as the onclick event handlers.

  • User profile image
    Cider

    I can't believe the thread has gone on this long without anyone mentioning the spelling mistake:

    btnHeightDec.onclick = HeightDescrease();
                                                       ^

  • User profile image
    W3bbo

    Cider wrote:

    I can't believe the thread has gone on this long without anyone mentioning the spelling mistake:

    btnHeightDec.onclick = HeightDescrease();
                                                       ^



    Heh.

    But that spelling mistake didn't affect the operation of the program since "HeightDescrease" was the name of the function as well.

  • User profile image
    Cider

    I know, but didn't your mother tell you, two wrongs don't make a right...

  • User profile image
    Maurits

    As long as it's mis-spelled the same way every time... (see RFC 2616 14.36)

  • User profile image
    W3bbo

    Maurits wrote:
    As long as it's mis-spelled the same way every time... (see RFC 2616 14.36)


    Question:

    How the heck did that mistake make it through to HTTP1.1?

  • User profile image
    sbc

    W3bbo wrote:
    Maurits wrote:As long as it's mis-spelled the same way every time... (see RFC 2616 14.36)


    Question:

    How the heck did that mistake make it through to HTTP1.1?

    Backwards compatibility. You don't want o break clients that still use HTTP1.0


    As for you javascript conundrum, have you ever tried using addEvent, instead of el.onevent? If you want the standards compliant way + IE fix (new version of the old addEvent function):
    http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html

    Or the non-standards way (that works in older browsers and also has no memory leak):
    http://dean.edwards.name/weblog/2005/10/add-event2/

    Hybrid version:
    http://therealcrisp.xs4all.nl/upload/addEvent_dean.html

Conversation locked

This conversation has been locked by the site admins. No new comments can be made.