Question

I have a button script to change the buttons in a frame based on the page loaded in the main frame. The problem I’m experiencing is that while the background images, tabindex and text on the button (innerHTML) all change as expected, the onclick doesn’t. It appears to completely ignore it. Here’s the script I’m using:

function createbutton(btn_N, btn_I, btn_L, btn_D) // (Div Name, Tab Index, Button Text, Page To Load){
    var btnN = top.frames['buttonbar'].document.getElementById(btn_N);

    btnN.style.cssText = "display:block; cursor:pointer; padding-left:16px; padding-top:5px;";
    btnN.onmouseover = function() {this.style.backgroundImage = "url('./osdimages/navBG_roll.png')";};
    btnN.onmouseout = function() {this.style.backgroundImage = '';};
    btnN.tabindex = btn_I;
    btnN.innerHTML = btn_L;
    btnN.onclick = btn_D;
}

The button call looks like this:

createbutton("button01", 1, "New Order/Browse",  "parent.frames['content'].location.href='createorder/createorder.asp';");

Answer 1

There is a difference between attributes and properties.

The best example of this is as follows:

• HTML: <input type="text" value="hello" id="test" />
• Type something in the text box
• document.getElementById('test').value is whatever you typed
• document.getElementById('test').getAttribute("value") is whatever was in the HTML

Some attributes are directly mapped to properties and vice versa, but this is not always the case.

For instance, the onClick attribute takes a string that is then eval‘d, but the onclick property takes a function. This is why your code isn’t working.

Either pass a valid function, or use setAttribute.