Dynamic Evaluation of document.getElementById

So here's the scenario.  I want to be able to dynamically edit any portion of any element through a function.  It'll be easier explained once you look at the function:

function updateElement(docObjName, attribute, value)
{
      if(validId(docObjName))
      {
            eval("document.getElementById(\"" + docObjName + "\")." + attribute + " = \"" + value + "\"");
      }
}

function validId(docObjName)
{
      if(document.getElementById(docObjName) != null)
      {
            return true;
      }
      return false;
}

So here's the question.  This works perfectly fine for the basic scenarios of doing simple updates of .style.height or .top, but the problem comes when I attempt to do more complex things through it.  Anything with a " in it causes an issue because it will end the quoted section prematurely.  Also it has problems if there are any complex tags being passed, for example loading a large set of HTML into a div.  So my question is how to take this function from it's current form to one that will work no matter what I am trying to assign to whatever attribute I choose.
LVL 1
skacoreAsked:
Who is Participating?
 
Michel PlungjanIT ExpertCommented:
@Pravinsar, why not post the method then?


function updateElement(docObjName, attribute, value) {
     if(validId(docObjName)) {
          document.getElementById(docObjName).setAttribute(attribute,value);
     }
}


or

function updateElement(docObjName, attribute, value) {
     if(validId(docObjName) && document.getElementById(docObjName).getAttribute(attribute)) {
          document.getElementById(docObjName).setAttribute(attribute,value);
     }
}
0
 
Pravin AsarPrincipal Systems EngineerCommented:
to get and set Attributes, you could use

getAttribute ()  setAttribute functions.

These are cross-browser functions.

As you may be already aware,  each tag has it own set of permissible attributes.

Please post some more details , I am willing to help you further on this project.

_PA
0
 
Michel PlungjanIT ExpertCommented:
Perhaps with some checking - however this one was not needed due to the toString() working just fine

<script>
function updateElement(docObjName, attribute, value) {
alert(typeof value === typeof document.getElementById(docObjName).getAttribute(attribute))
  if( document.getElementById(docObjName) && document.getElementById(docObjName).getAttribute(attribute)) {
    document.getElementById(docObjName).setAttribute(attribute,value);
  }
}

</script>

<div id="test" onClick="updateElement(this.id,'innerHTML',new Date())">XXX</div>
0
 
Pravin AsarPrincipal Systems EngineerCommented:
Here is a simple example.

You can assign and inquire attribute for a table
Has no belts-whistles to for validate value checks (while assign attributes).
Hope this helps.
 

<html>
<head>
<title>Attribute Tutorial</title>
</head>
<body>
<script language="javascript">
function validId(docObjName)
{
return (document.getElementById(docObjName));
}
function ApplyAttribute (objIdx, attrName, attrValue) {
   var curObj= document.getElementById (objIdx);
      if (!curObj) { return; }
   var retCode =      curObj.setAttribute (attrName, attrValue);
      if (retCode) { alert ('Error '); }
}
function InquireAttribute (objIdx, attrName) {
   var curObj= document.getElementById (objIdx);
      if (!curObj) { return; }

   var retValue = curObj.getAttribute (attrName);
      alert ('Object ' + objIdx +
             '\n\t Attribute Name  : ' + attrName +
             '\n\t Attribute Value : ' + retValue);
}

</script>
<form>
<select name="attrName">
      <option value="align">align</option>
      <option value="border">border</option>
      <option value="height">height</option>
      <option value="width">width</option>
</select>
<input type="text" name="attrValue">
<input type="button" value="Apply Attribute" onclick="ApplyAttribute('tbl1',

this.form.attrName.value, this.form.attrValue.value);">
<input type="button" value="Inquire Attribute"

onclick="InquireAttribute('tbl1', this.form.attrName.value);">
</form>
<br>

<table id="tbl1" align="left" width="400" height="100" border="1">
<tr>
<td>
Table Attributes
<br>align = [center|left|right|justified]
<br>border = [0|1]
<br>height = [number of pixels | % ]
<br>width = [number of pixels | % ]
</td>
</tr>
</table>
</body>
</html>
0
 
Pravin AsarPrincipal Systems EngineerCommented:
Oops, looks like you accepted while was gathering this tutorial.

Thanks,

_PA
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.