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.