javascript - 如何在 Javascript 中从表单中的 url 打印图像？

Question

这是一个很小的表单，我在其中粘贴有效的 URL，单击按钮并在第三个输入类型元素中显示图像:

<input id="url" type="text">
<br><input id="getImage" type="button" onclick="getImages()" value="Get the image!">
<br><br><input id="showImage" type="image">

这是我的 JavaScript:

function getImages() {
    url=document.getElementById('url').value;
    imagen=document.getElementById(showImage).value='<img src="'+url+'">';
}

我刚刚有了我的第一个 javascript 类，想知道要使用什么函数，我知道这个 imagen=document.getElementById(showImage).value='<img src="'+url+'">';不正确。

当我尝试运行脚本时出现此错误:

Uncaught TypeError: Cannot set property 'value' of null

当然，有问题的行是:

imagen=document.getElementById(showImage).value='<img src="'+url+'">';

我想知道什么函数可以打印出来。谢谢!

Answer 1

这是正确的函数。你忘了使用 '您应该关闭该输入标签。

function getImages() {
    url=document.getElementById('url').innerHTML;
    document.getElementById('showImage').innerHTML='<img src="'+url+'" />';
}

也许更好的代码是:

<input id="url" type="text" onChange="getimages();"></input>
<br><br><div id='showImage'></div>
<script>function getimages() {
    url=document.getElementById('url').value;
    document.getElementById('showImage').innerHTML='<img src="'+url+'" />';
}</script>

因此，当您粘贴链接时，图像应该立即出现。