[SOLVED] Is there a way to add attribute to an element?

[optikalefx]

If i have <img src="myimage.jpg">  and i want to click a button that changes the code to <img src="myimage.jpg" id="newlyaddedid">

I can use innerHTML to add txt around it, but idk how to set/create attributes within the tag.

[phpQuestioner]

 

you will have to give the image an id; unless you reference all images in the page. which you can do, but I don't think that is what your wanting to do.

 

try this:

 

<script language="javascript">
function addstuff()
{
document.getElementById("newlyaddedid").name="mypic";
document.getElementById("newlyaddedid").title="hello world!";
document.getElementById("newlyaddedid").alt="This is a picture of......";
document.getElementById("newlyaddedid").style.width="100px";
document.getElementById("newlyaddedid").style.height="100px";
document.getElementById("newlyaddedid").border="1";
}
</script>

<img id="newlyaddedid" src="myimage.jpg">

<br><br>

<input type="button" value="Add Attributes" onclick="addstuff()">

[optikalefx]

yea i want to access all the images on the page.  But they dont have an ID to begin with either.  I want to add the ID to all the <img tags on the page

[phpQuestioner]

 

You cannot have the same id for every image; but you should be able to access all the image tags a different way.

 

Try This:

 

<script language="javascript">
function addstuff()
{
document.getElementsByTagName("img").name="mypic";
document.getElementsByTagName("img").title="hello world!";
document.getElementsByTagName("img").alt="This is a picture of......";
document.getElementsByTagName("img").style.width="100px";
document.getElementsByTagName("img").style.height="100px";
document.getElementsByTagName("img").border="1";
}
</script>

<img src="myimage.jpg">

<br><br>

<input type="button" value="Add Attributes" onclick="addstuff()">

[nogray]

getElementsByTagName will return a collection of images, so you can't set the name attribute to it directly.

 

If you want to add attributes to your images, you can access them using something like this

var imgs = document.getElementsByTagName('img');
var i=0, loop=imgs.length;
for (i=0; i<loop; i++){
    imgs[i].id = "image_"+i;
}

[phpQuestioner]

getElementsByTagName will return a collection of images, so you can't set the name attribute to it directly.

 

If you want to add attributes to your images, you can access them using something like this

var imgs = document.getElementsByTagName('img');
var i=0, loop=imgs.length;
for (i=0; i<loop; i++){
    imgs[i].id = "image_"+i;
}

 

Your write about the name attribute; I didn't mean to leave that one in there, but the rest of the attributes should work fine for all images in your page.

[nogray]

Your write about the name attribute; I didn't mean to leave that one in there, but the rest of the attributes should work fine for all images in your page.

 

Not sure if you're familar with collections and single elements. Here are some details about it getElementsByTagName

http://developer.mozilla.org/en/docs/DOM:element.getElementsByTagName

Notice it returns a node list which doesn't support any of the attriubtes you listed above.

 

Try to save your code as HTML and  test it

[phpQuestioner]

Your write about the name attribute; I didn't mean to leave that one in there, but the rest of the attributes should work fine for all images in your page.

 

Not sure if you're familar with collections and single elements. Here are some details about it getElementsByTagName

http://developer.mozilla.org/en/docs/DOM:element.getElementsByTagName

Notice it returns a node list which doesn't support any of the attriubtes you listed above.

 

Try to save your code as HTML and  test it

 

Not sure if you have heard of this saying nogray, but "there is workaround for almost everything".

 

<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">

<script>
var totalimgs = document.images.length;
function addstuff()
{
for (i=0;i<=totalimgs;i++) {
document.images[i].style.border="solid 2px red";
document.images[i].style.width="100px";
document.images[i].style.height="100px";
document.images[i].title="hello world!";
document.images[i].alt="This is a picture of......";
}
}
function escapeErrors()
{
return true;
}
window.onerror=escapeErrors;
</script>

<br><br>

<input type="button" value="Add Attributes" onclick="add()">

[phpQuestioner]

 

script correction - sorry about that

 

<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">

<script>
var totalimgs = document.images.length;
function addstuff()
{
for (i=0;i<=totalimgs;i++) {
document.images[i].style.border="solid 2px red";
document.images[i].style.width="100px";
document.images[i].style.height="100px";
document.images[i].title="hello world!";
document.images[i].alt="This is a picture of......";
}
}
function escapeErrors()
{
return true;
}
window.onerror=escapeErrors;
</script>

<br><br>

<input type="button" value="Add Attributes" onclick="addstuff()">

[phpQuestioner]

Here is another version too; this version will allow you to give all your images unique names and ids.

 

<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">

<script language="javascript">
var totalimgs = document.images.length;
function addstuff()
{
for (i=0;i<=totalimgs;i++) {
var names = i + 1;
document.images[i].style.border="solid 2px red";
document.images[i].style.width="100px";
document.images[i].style.height="100px";
document.images[i].title="hello world!";
document.images[i].alt="This is a picture of......";
document.images[i].name="Picture"+names+"";
document.images[i].id="Pic"+name+"";
}
}
function escapeErrors()
{
return true;
}
window.onerror=escapeErrors;
</script>

<br><br>

<input type="button" value="Add Attributes" onclick="addstuff()">

[phpQuestioner]

EDIT

 

Sorry time limit got me

 

<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">

<script language="javascript">
var totalimgs = document.images.length;
function addstuff()
{
for (i=0;i<=totalimgs;i++) {
var names = i + 1;
document.images[i].style.border="solid 2px red";
document.images[i].style.width="100px";
document.images[i].style.height="100px";
document.images[i].title="hello world!";
document.images[i].alt="This is a picture of......";
document.images[i].name="Picture"+names+"";
document.images[i].id="Pic"+names+"";
}
}
function escapeErrors()
{
return true;
}
window.onerror=escapeErrors;
</script>

<br><br>

<input type="button" value="Add Attributes" onclick="addstuff()">

[optikalefx]

Ahh that works great, thats exactly what i was looking for. schweeeet.  I look forward to you figuring out this next (hopefully last) problem in my next thread.

[phpQuestioner]

 

Good Luck