SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,423
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)

    Dynamically assigning onclick in IE

    I have a simple script that rewrites part of a page. Nothing fancy. It just removes a select box and adds an input field and two buttons. One that increases the values of the input field and the other decreases it.

    In Internet Explorer (naturally it works in Firefox) when clicking on the buttons (they are images) the form is submitted. This is despite specifying 'return false' in the onclick event.

    Is there a bug or shortcoming in IE that I am not aware of?

    Code:
    function increase(obj)
    {
        obj = document.getElementById(obj);
        return obj.value = parseInt(obj.value) + 1;
    }
    
    function decrease(obj)
    {
        obj = document.getElementById(obj);
        if (parseInt(obj.value) == 1) return;
        else return obj.value = parseInt(obj.value) - 1;
    }
    
    function improveSelect()
    {
        if (!document.getElementById) return false;
        
        var plateform = document.getElementById('selectholder');
        var quantity  = document.getElementById('quantity');
    
        // Delete the select field from the document
        plateform.removeChild(quantity);
    
        // Create the field to hold the quantity
        var input = document.createElement('input');
        input.setAttribute('readonly', 'readonly');
        input.setAttribute('type', 'text');
        input.setAttribute('id', 'quantity');
        input.setAttribute('name', 'quantity');
        input.setAttribute('value', '1');
        plateform.appendChild(input);
    
        // Create the button that will increment the value
        var increase = document.createElement('input');
        increase.setAttribute('type', 'image');
        increase.setAttribute('id', 'increase');
        increase.setAttribute('name', 'increase');
        increase.setAttribute('src', '/images/arrow_up.png');
        increase.setAttribute('alt', 'More Plates');
        increase.setAttribute('onclick', 'increase("quantity"); return false;');
        plateform.appendChild(increase);
    
        // Create the button that will increment the value
        var decrease = document.createElement('input');
        decrease.setAttribute('type', 'image');
        decrease.setAttribute('id', 'increase');
        decrease.setAttribute('name', 'increase');
        decrease.setAttribute('src', '/images/arrow_down.png');
        decrease.setAttribute('alt', 'Less Plates');
        decrease.setAttribute('onclick', 'decrease("quantity"); return false;');
        plateform.appendChild(decrease);
    }

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE doesn't support using setAttribute() to set event handlers. I recommend Dean Edward's event manipulation functions.

    Also, there's a bug in IE regarding setting the name attribute on elements created with document.createElement(). These describe the solution:
    Death to bad DOM Implementations (Anthony Lieuallen's version of the function)
    Setting the "name" attribute in Internet Explorer

    P.S. Why do you like to use setAttribute()? IE doesn't fully support it and it adds unnecessary characters to scripts.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,423
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    IE doesn't support using setAttribute() to set event handlers. I recommend Dean Edward's event manipulation functions.
    Didn't know that. Once again, thank you IE for making a simple thing more difficult.

    Quote Originally Posted by Kravvitz View Post
    Also, there's a bug in IE regarding setting the name attribute on elements created with document.createElement(). These describe the solution:
    Death to bad DOM Implementations (Anthony Lieuallen's version of the function)
    Setting the "name" attribute in Internet Explorer
    Even better.

    Quote Originally Posted by Kravvitz View Post
    P.S. Why do you like to use setAttribute()? IE doesn't fully support it and it adds unnecessary characters to scripts.
    Didn't know there was any issues with using setAttribute(). Seemed like a clean way to get it done.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •