Question

我有一个类似这样的代码：

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

我希望当有人关注image_url或甚至做onChange事件时，会引发一个名为changeImage()的Javascript函数（我已经知道该怎么做了，现在我知道了't）并将image_comp更改更改为image_url中写入的网址。怎么做？

Answer 1

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

如果您有更多具有相同名称的元素，您可以遍历它们或使用ID，如果您想确定它只为1个元素执行此操作。

Answer 2

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

Answer 3

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

您可以为这两个元素定义 ids ，并在onChange函数中使用它：

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

使用Javascript更改图像源

3 个答案: