asked on

setAttribute problem in IE

Hi,

I am facing problems with setAttribute function in IE. I understand from what I read on the net that IE doesn't support it and will never support it. I would like to understand if there is a solution for what I want to do that works both in IE (at least version 7 onwards) and Firefox.

My requirement is:

I am dynamically generating fields by using Javascript. I need to assign properties like classes, names, IDs, events dynamically to these. I am currently using setAttribute to do this.

Below is a sample code where I am using an alternate solution by hiding and showing hyperlinks. While I can afford to do it for this example, I cannot in many places in the rest of my code.

So, if I can get help on satisfying my requirement in the below code without the alternate solution I am currently using, it will help me fix the rest of my code.
this HTML
<a href="javascript:void(0)" id="edit" onclick="companyEdit();" >Edit</a>

is calling the function defined here:

<script language="javascript">
function companyEdit()
{
alert('edit company');
document.getElementById('edit').innerHTML="Save";
document.getElementById('edit').setAttribute("onclick", "saveCompany('save company');");
}
function saveCompany(msg)
{
alert(msg);
}
</script>

I want to change companyEdit() to saveCompany() dynamically using setAttribute.
Above example is not working IE only.

For this i have one alternative solution

i have another hyperlink like
<a href="javascript:void(0)" style="display:none" id="save" onclick="saveCompany('save company');" >save</a>
when somebody cick on edit link i am changing display:none to display:block.

HonorGod

Try using something like:

document.getElementById('save').onclick = function(){saveCompany('save Company');}

Open in new window

HonorGod

Of course, if you are going to do multiple things with the object, don't duplicate the document.getElementById(). For example:

function companyEdit() {
  alert('edit company');
  var edit = document.getElementById('edit')
  if ( edit ) {
   edit.innerHTML = "Save";
   edit.onclick = function() { saveCompany('save company'); )
  } else {
    alert( 'document element not found.  id="edit"' )
  }
}

Open in new window

ASKER CERTIFIED SOLUTION

third

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Savitrikvl

ASKER

Thanks for your reply i have one more question above example is working only for events only.
but i want to setAttribute function for all attributes
example:
This example is working FF but not IE
objDiv.setAttribute("style","position:absolute;top:200px;left:25px;width:200px;height:150px;border:1px solid black;background:white;padding:5px;z-index:3;overflow:auto;");

third

for style attribute, you can do obj.style.property = value. for properties with dashes, like property-name becomes propertyName (e.g. font-weight becomes fontWeight). the other way is to define a CSS class for that style, then add the class by obj.className = 'yourclassname'

function changeAttribute(){
var obj = document.getElementById('mybutton');
obj.setAttribute('value', 'some new value');
//obj.setAttribute('onclick', 'alert("test")');
//obj.onclick = function(){alert("test")};

setEventAttribute(obj, 'onclick', 'alert("test")')
obj.style.width = '200px';
obj.style.zIndex = 3;
}