使用Javascript更改图像源

我有一个片段是这样的：

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

我希望当有人不关注

image\u url

或者甚至做了一个

onChange

事件时，一个名为

changeImage（）

的Javascript函数被启动（这我已经知道怎么做了，现在是我不知道的），并将

image\u comp

更改为

image\u url

中写入的url。如何做到这一点

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

如果您有更多同名的元素，您可以在它们之间循环，或者如果您希望确保只对1个元素执行此操作，则可以使用id

<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>

如果您有更多同名元素，您可以循环使用它们，或者如果您想确保只对一个元素执行此操作，则可以使用id。

<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>

jQuery（'#image_url'）.bind（'change blur'，function（）{
jQuery（'#image_comp'）.attr（'src'，this.value）；
});

jQuery（'#image_url'）.bind（'change blur'，function（）{
jQuery（'#image_comp'）.attr（'src'，this.value）；
});

可能是document.getElementByName（'image\u comp'）.src=document.getElementByName（'image\u url'）.value

getElementByName

不是函数，只是

getElementsByName

。这是因为名称不需要像

id

那样是唯一的

getElementsByName

返回具有指定名称的对象数组。可能是document.getElementByName（'image\u comp'）。src=document.getElementByName（'image\u url'）。值

getElementByName

不是函数，只是

getElementsByName

。这是因为名称不需要像

id

那样是唯一的

getElementsByName

返回具有指定名称的对象数组。这是在喝咖啡之前回答时发生的情况：-P在喝咖啡之前回答时发生的情况：-P

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