jQuery用户输入并显示不同的结果

Question

我是javascript的新手。

我想创建一个可以显示用户输入结果的网站。

例如，

用户可以输入dog，并向用户显示狗img。 （图像已存在）

现在，我知道如何通过javascript的默认值显示图像。

但我希望我可以获取用户输入，然后将此值提供给javascript，然后显示结果。

我该怎么做？

真的需要你的帮助，谢谢你。

Answer 1

http://jsbin.com/JS_input_change_image/edit

<input id="userInput" tyle="text">  
<img id="theImage" src="folder/default.jpg">

JS：

function $el(id){ return document.getElementById(id); }
function getImage(){ 
  $el('theImage').src = "folder/"+ this.value +".jpg"
}
$el('userInput').addEventListener('input', getImage, false );

• 函数$el( id )只是一个可重用的函数，可以帮助我们获得所需的元素
• 当用户在我们的#userInput "input"事件上创建时，我们只需调用getImage()函数即可。
• 绑定到元素的getImage函数将引用该元素this.value来获取输入的值并相应地更改图像src我们的#theImage元素。

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener

_{这只是为了让您入门，将来尝试在您的问题中添加您已经尝试过的内容 - 这样我们就可以从某个地方开始提供帮助，或者为您提供有关代码的更多建议。< /子>}