How to make image src dependent on input?

Question

So Im making a program that INVOLVES the user entering an image source and the code displays that. My #1 problem is how to make <img scr=[whatever the user’s inputted URL here ].

Answer 1

@Faisal,

You can't directly use tag name elements, y.src = x;
it's an array.

Use following instead
y[0].src = x;
to set the first occurrence of the tag elements.

Answer 2

Here are a few different ways to accomplish the query
https://stackoverflow.com/questions/12875911/how-can-i-make-my-input-type-submit-an-image

Answer 3

To do this, you may need to use JavaScript. Set a variable to prompt the user for the URL for the website, then set the value of the src attribute for the image as that value.

For example:
var x = prompt("Enter the URL of the image");
var y = document.getElementByTagName("img");

y.src = x;

Answer 4

Alright. Seems legit. Im not sure I have the HTML right. I simply have <img> in there. The JS should pick up the img tag and change src to user input. However, I get a blank page, so something is obviously going wrong.

Is there a way to assign a variable or id to the img element and refer and manipulate it in the JS?

Answer 5

@Faisal

Thanks for the help! Works great!

Answer 6

@Faisal

Apparently getElementByTagName isnt a function...

Answer 7

@Faisal

Lol. Welcome to my world.

Thanks though!

Answer 8

You could also just create the img tag directly through JavaScript, which may work a little better. To do this, just use a document.write function with the tag inside of it, just like in HTML.

For example:
var x = prompt();
document.write("<img src = " + x + "></img>");

Answer 9

@privrax. Uuuuggghhh sorry I can never get that right. The function should be getElementsByTagName, with element being plural.