Changing The Image Source Using Javascript

Question

I have a snippet that is like this:

<div id="image_input">
    <img src="missing-image.png" name="image_comp" />
    <input type="text" name="image_url" size="37" />
</div>

I want that when someone unfocus image_url or even do a onChange event, a Javascript function called changeImage() be raised(this I already know how to do, now comes what I don't) and change the image_comp changes to the URL that is written in image_url. How to do this?

maybe document.getElementByName('image_comp').src = document.getElementByName('image_url').value; — Zhasulan Berdibekov
– Zhasulan Berdibekov, Commented Jan 11, 2011 at 3:31
getElementByName is not a function, only getElementsByName. This is because the name does not need to be unique like id. getElementsByName returns an array of objects with the specified name. — Mark Baijens
– Mark Baijens, Commented Jan 11, 2011 at 3:34

Mark Baijens · Accepted Answer · 2011-01-11 04:19:42Z

4

document.getElementsByName("image_comp")[0].src = document.getElementsByName("image_url")[0].src;

if you have more elements with the same name you can loop trough them or use id's if you want to be sure it you do this for only 1 element.

edited Jan 11, 2011 at 4:19

answered Jan 11, 2011 at 3:32

Mark Baijens

13.3k11 gold badges51 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kashyap Nadig · Accepted Answer · 2011-01-11 04:11:16Z

1

<div id="image_input">
    <img src="missing-image.png" name="image_comp" id="image_comp" />
    <input type="text" name="image_url" size="37" id="image_url" />
</div>

You can define ids for both the elements and have this in your onChange function:

document.getElementById('image_comp').src = document.getElementById('image_url').value;

answered Jan 11, 2011 at 4:11

Kashyap Nadig

1166 bronze badges

Comments

Stephen · Accepted Answer · 2011-01-11 08:01:09Z

1

<div id="image_input">
    <img src="missing-image.png" id="image_comp" />
    <input type="text" name="image_url" id="image_url" size="37" />
</div>

<script type="text/javascript">
    jQuery('#image_url').bind('change blur', function () {
        jQuery('#image_comp').attr('src', this.value);
    });
</script>

edited Jan 11, 2011 at 8:01

answered Jan 11, 2011 at 3:52

Stephen

19k4 gold badges35 silver badges33 bronze badges

1 Comment

Stephen Over a year ago

that's what happens when you answer before having coffee :-P

Collectives™ on Stack Overflow

Changing The Image Source Using Javascript

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related