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來獲取輸入值，並相應地更改我們的#theImage元素的圖像src。

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

_{這只是讓你開始，在未來嘗試在你的問題添加了你已經嘗試過 - 所以我們可以開始從某處幫助或給你更多的建議你的代碼。}