IE7 javascript using DOM wont output Dynamic Text?

[hoist1138]

Thanks to anyone who may be able to steer me in the right direction :)

Interesting that this works fine in All Browsers BUT Internet Explorer.
fairly simple goal......

get a "src" img element attribute and display it (by manipulating DOM elements) on the webpage under a graphic...(for a dynamic label)

var mainPic = document.getElementById("placeholder");
 
var picSrc = mainPic.getAttribute("src");
 
var container = document.getElementById("divContainer");//the container div refference so I can use replaceChild() method to replace the targeted <p> Child Node
 
var oldText = document.getElementById("replaceMe");
var newPara = document.createElement("p");
var lableName = document.createTextNode(picSrc); //this variable doesnt want to transfer in IE, works fine in FF and Safari
newPara.appendChild(newName);
newPara.setAttribute("id","replaceMe");
 
container.replaceChild(newPara,oldText);

again, the goal is satisfied if all I can do is get IE to actually out put a dynamic text variable using the DOM with replaceChild()
Is there a known issue with outputing strings using the DOM in IEx?
thanks to all who lend some brain matter.

[mrhoo]

newPara.appendC hild(newName);

You have no variable newName declared.

[hoist1138]

opps, thanks for the look...I forgot to include it in the Original post, Again heres the weird thing, It works great in all other browsers, and I have tried to look google over and over. Im not sure where to look for this issue.

var mainPic = document.getElementById("placeholder");
 
var picSrc = mainPic.getAttribute("src");
 
var container = document.getElementById("divContainer");//the container div refference so I can use replaceChild() method to replace the targeted <p> Child Node
 
var oldText = document.getElementById("replaceMe");
 
var newPara = document.createElement("p");
 
var lableName = document.createTextNode(picSrc); //this variable doesnt want to transfer in IE, works fine in FF and Safari
var newName = picSrc;
newPara.appendChild(newName);
 
newPara.setAttribute("id","replaceMe");
 
container.replaceChild(newPara,oldText);

[acoder]

What's the value of the src attribute? Is it relative or an absolute path?

[hoist1138]

here is an example of an image name that the script gets and displays on the page perfectly fine with FF and safari..

//heres the HTML the image src attrib I want to grab....
<img src="Single/VG-001B.jpg" alt="" name="placeholder" width="450" height="350" id="placeholder" />
 
//heres the javascript targeting that src attrib......
 
var mainPic = document.getElementById("placeholder");
//set up the PARENT DIV CONTAINER so the child elements can be manipulated
//first check if the current pages has the <div id="divContainer"> node there, otherwise forget this section!
        if(document.getElementById("divContainer")){
var picSrc = mainPic.getAttribute("src");
            var getFullName = picSrc.split("/");//use the "/" character to mark the split point into an array
            var getName = getFullName[1].split(".");
            var finalName = getName[0];
            var container = document.getElementById("divContainer");
            var oldText = document.getElementById("replaceMe");
            var newPara = document.createElement("p");
            var newName = document.createTextNode(finalName);
            /*var test = document.createTextElement("this is a test");*/
            /*var myText = document.getElementById("text");*/
            newPara.appendChild(newName);
            newPara.setAttribute("id","replaceMe");
            container.replaceChild(newPara,oldText);
            }
 
            //stop the default a link behavior
            return false;
 

its an absolute path right?

[hoist1138]

by the way to see the real world example for my client.....
http://www.pet-memorial-markers.com/...owerVases.html
the vase name at the bottom of the graphic is the graphic name extracted from the path
again, try it in FF or Safari, and then.......IE and BLAM, no dynamic src attribute rendering to the page.....

one solution I was thinking of was doing detection script for IE, heres the prototype.....

if ( IE ){
then use non-standard INNER HTML to render to the browser
}else{
use standards like the DOM because standards make life easier for humans that build stuff
}

[acoder]

If you alert picSrc, you will see that IE converts it to a full path, while the rest of the browsers leave it as you expect it to be.

[Romulo NF]

If i got it right thats more or less what you need

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 
<html>
<head>
    <title>Dinamic Label</title>
</head>
 
<script>
 
window.onload = function() {
imgs = document.getElementsByTagName("img")
images = new Array()
 
    for (x=0; x<imgs.length; x++) {
    images[x] = new createDynamicLabel(imgs[x])
    }
}
 
function createDynamicLabel(imgReference) {
this.image = imgReference
 
this.name = this.image.src.substring(this.image.src.lastIndexOf("/")+1,this.image.src.lastIndexOf("."))
 
this.lineBreak = document.createElement("br")
this.image.parentNode.insertBefore(this.lineBreak,this.image.nextSibling)
 
this.label = document.createElement("em")
this.label.innerHTML = this.name
this.label.style.textTransform = "capitalize"
this.label.style.font = "bold 11px verdana"
 
this.image.parentNode.insertBefore(this.label,this.lineBreak.nextSibling)
}
 
</script>
 
<body>
 
<img src="down.gif">
 
<br><br>
 
<img src="aceitar.gif">
 
<br><br>
 
<img src="add.gif">
 
<br><br>
 
<img src="cancelar.gif">
 
</body>
</html>
 
 

Good luck!

ps: take care with additional blank spaces in the code like in line 32

[acoder]

If i got it right thats more or less what you need

Nice! That should do the trick - the most important thing is the use of lastIndexOf().

[hoist1138]

thanks everyone, all masters...