how to get text input to be used as a reference to an image src

[jayce_online]

I've been looking for a reference to my situation for two days and i can't find any that are relevant enough.

I'm trying to accept text as a URL for an image source.
I then display that image in a form with the use of a <button type=button onclick=codeThatGeneratesImage > type thing.



function addImageToForm(formID) {
//get a reference to the form
var formElement = document.getElementById(formID);
//get a reference to the element that contains the url
var elementWithImageURL = document.getElementbyId("imageURLInput");
//get URL entered
var imageURL = elementWithImageURL.getAttribute("value");
//create image element
----------------------------------------------------------------------------------
var newImage = document.createElement("img");
//reference the source using the url
newImage.setAttribute("src", imageURL);
newImage.setAttribute("name", "newImage");
//append the image to form
formElement.appendChild(newImage);
}


i know that the bottom half works because i tried it with just a reference to an image directly and it worked.

i can't figure out why most of the top part isnt working.

any help would be much appreciated :)

[jscheuer1]

getAttribute() and setAttribute() are often not required and can in some cases not be or do what one expects. Assuming you have the markup to support all this, I would:


function addImageToForm(formID) {
//get a reference to the form
var formElement = document.getElementById(formID);
//get a reference to the element that contains the url
var elementWithImageURL = document.getElementbyId("imageURLInput");
//get URL entered
var imageURL = elementWithImageURL.value;
//create image element
// ----------------------------------------------------------------------------------
var newImage = document.createElement("img");
//reference the source using the url
newImage.src = imageURL;
newImage.name = "newImage";
//append the image to form
formElement.appendChild(newImage);
}

If that still doesn't work, make sure the value of the element is as expected with an alert:


function addImageToForm(formID) {
//get a reference to the form
var formElement = document.getElementById(formID);
//get a reference to the element that contains the url
var elementWithImageURL = document.getElementbyId("imageURLInput");
//get URL entered
var imageURL = elementWithImageURL.value;
alert(imageURL);
//create image element
// ----------------------------------------------------------------------------------
var newImage = document.createElement("img");
//reference the source using the url
newImage.src = imageURL;
newImage.name = "newImage";
//append the image to form
formElement.appendChild(newImage);
}

If you want more help I need to see the markup you are using this with. I also need to know what event runs this function. Perhaps the expected elements aren't available yet.

[bluewalrus]

Is "formID" being set correctly, if not sure try alerting it to confirm the value is as expected.