19

我想以我对 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>

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

我确信我对 Javascript 的缺乏经验是我无法弄清楚这一点的主要原因。上面的脚本是尽我所能得到的，而不会把事情搞砸。任何帮助表示赞赏。

4

6 回答 6

31

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

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

小提琴

在 jQuery 中也是一样的：

$('#btn').on('click', function() {
    var img = $('<img />', {src : 'http://webpage.com/images/' + $('#imagename').val() +'.png'});
    img.appendTo('body');
});
于 2013-07-13T20:43:36.390 回答
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>
于 2013-07-13T20:45:20.887 回答
2

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

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

我试图尽可能接近你的原件，因为 tp 不要用 jQuery 之类的东西压倒你

于 2013-07-13T20:46:02.040 回答
1

您必须正确地根据输入值生成 url。唯一的问题是您使用的是 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>
于 2013-07-13T20:46:17.103 回答
1

您只是缺少一个图像标签来更改以下的“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>
于 2013-07-13T20:51:41.040 回答
-2

首先，我强烈建议使用库或框架来编写 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 部分）

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

http://jsfiddle.net/HsnSa/

于 2013-07-13T21:02:47.227 回答