Question

我想在此之前加上我对JavaScript非常新的事实。感谢您对我的耐心。

我正在尝试创建一个脚本，允许用户在文本区域中输入名称，按提交，然后根据该名称显示图像。

我设法得到了这个：

<html>
<body>
<form>
<input type="text" value="" id="imagename">
<input type="button" onclick="window.location.href='http://webpage.com/images/'+document.getElementById('imagename').value +'.png'" value="GO">
</form>
</body>
</html>

这几乎完全符合我的需要 - 围绕用户输入的内容加载图像。但我想要的不是图像在新窗口中打开，或者下载到我的计算机 - 我希望它在点击时显示在页面上，如the example here这样的图像。

我确信我对Javascript的经验不足是我无法解决这个问题的主要原因。上面的脚本是我可以得到的，而不会搞砸了。任何帮助表示赞赏。

Answer 1

单击该按钮时，获取输入的值并使用它创建一个附加到正文（或其他任何位置）的图像元素：

<html>
<body>
<form>
    <input type="text" id="imagename" value="" />
    <input type="button" id="btn" value="GO" />
</form>
    <script type="text/javascript">
        document.getElementById('btn').onclick = function() {
            var val = document.getElementById('imagename').value,
                src = 'http://webpage.com/images/' + val +'.png',
                img = document.createElement('img');

            img.src = src;
            document.body.appendChild(img);
        }
    </script>
</body>
</html>

FIDDLE

在jQuery中相同：

$('#btn').on('click', function() {
    var img = $('<img />', {src : 'http://webpage.com/images/' + $('#imagename').val() +'.png'});
    img.appendTo('body');
});

Answer 2

您必须根据输入值生成网址。唯一的问题是你使用的是window.location.href。设置window.location.href会更改当前窗口的URL。您可能想要做的是更改图像的src属性。

<html>
<body>
<form>
  <input type="text" value="" id="imagename">
  <input type="button" onclick="var image = document.getElementById('the-image'); image.src='http://webpage.com/images/'+document.getElementById('imagename').value +'.png'" value="GO">
</form>
<img id="the-image">
</body>
</html>

Answer 3

您只是缺少一个图片标记来更改“src”属性：

    <html>
<body>
<form>
<input type="text" value="" id="imagename">
<input type="button" onclick="document.getElementById('img1').src =          'http://webpage.com/images/' + document.getElementById('imagename').value +'.png'"     value="GO">
<br/>
<img id="img1" src="defaultimage.png" />
</form>
</body>
</html>

Answer 4

你是否喜欢这样的事情：

 <html>
 <head>
    <title>Z Test</title>
 </head>
 <body>

<div id="img_home"></div>

<button onclick="addimage()" type="button">Add an image</button>

<script>
function addimage() {
    var img = new Image();
    img.src = "https://www.google.com/images/srpr/logo4w.png"
    img_home.appendChild(img);
}
</script>
</body>

Answer 5

添加ID为imgDiv的div并制作脚本

 document.getElementById('imgDiv').innerHTML='<img src=\'http://webpage.com/images/'+document.getElementById('imagename').value +'.png\'>'

我试图保持尽可能接近你的原始tp而不是用jQuery和

压倒你

Answer 6

首先，我强烈建议使用库或框架来执行您的Javascript。但只是为了非常简单的事情，或者为了学习的乐趣，这是可以的。（你可以使用jquery，下划线，knockoutjs，angular）

其次，不建议直接绑定到onclick，我的第一个建议也是这样。

那是说的您需要的是修改页面中img的src。

在您希望显示图片的位置，您应该插入一个img标签，如下所示：

接下来，您需要修改onclick以更新src属性。我能想到的最简单的方法就像他的

onclick=""document.getElementById('image-placeholder').src = 'http://webpage.com/images/' + document.getElementById('imagename').value + '.png"

然而，这不是最好的方法，但这是一个开始。我建议你尝试jQuery，看看如何使用onclick完成相同的whitout（提示...查看有关事件的jquery部分）

我做了一个简单的小提琴作为你的poblem的一个例子，使用一些谷歌徽标...在框中键入4 o 3，你将有两个不同大小的图像。（对不起..我没有时间搜索更好的图像作为例子）

http://jsfiddle.net/HsnSa/

Javascript：从网址加载图片并显示

6 个答案: