asked on

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.

SOLUTION

Pravin Asar

membership

This solution is only available to members.

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

Start Free Trial

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

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

Start Free Trial

Michel Plungjan

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>

Pravin Asar

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>

Pravin Asar

Oops, looks like you accepted while was gathering this tutorial.

Thanks,

_PA