[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Dynamic Evaluation of document.getElementById

Posted on 2006-05-17
5
Medium Priority
?
665 Views
Last Modified: 2008-02-20
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.
0
Comment
Question by:skacore
  • 3
  • 2
5 Comments
 
LVL 29

Assisted Solution

by:Pravin Asar
Pravin Asar earned 600 total points
ID: 16699248
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
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 1400 total points
ID: 16699561
@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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 16699609
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
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16700217
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
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 16700230
Oops, looks like you accepted while was gathering this tutorial.

Thanks,

_PA
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question