JavaScript：基於在文本框中鍵入的值更改圖像

Question

我在想如果有一種方法可以使用JavaScript onChange事件來更改基於窗體上的文本框中鍵入的數字的圖像的SRC。例如，如果用戶鍵入以數字3開頭的數字，我希望SRC指向一個圖像，但如果用戶鍵入以數字4開頭的數字，我希望SRC指向一個數字不同的圖像，並且當用戶鍵入以5開頭的數字或以6開頭的數字時，我想要進行其他SRC更改。

在此先感謝！

Answer 1

謝謝大家的幫助。

:)

這裏是我公司開發的最終解決方案。我使用了一個onkeyup事件，因爲它更適合我的需求。在HTML我用：

<form name="AddCardToAccount" id="AddCardToAccount" action="" method="post"> 
    <img id="imgCC" name="imgCC" class="imgCC" src="/includes/sci/images/imgNoCC_.gif"> 
    <input type="text" name="cardNumber" id="cardNumber" size="31" onkeyup="handleKeypress(this,event);"> 

我加了一些病例數以覆蓋鍵盤的數字，除了鍵盤的數字。下面是我用JavaScript的：

 function handleKeypress(inCardNumber,e) { 
      var inCardNumber = document.AddCardToAccount.cardNumber; 
      var imgToSwap = document.AddCardToAccount.imgCC; 
      var charCode; 
      if(e && e.which){ 
       charCode = e.which; // For Firefox 
       } 
       else if(window.event){ 

        e = window.event; 
        charCode = e.keyCode; // For IE 

      } 
      if (inCardNumber.value.length === 1) { 
       switch (charCode) { 
        case (48): 
         imgToSwap.src = "includes/sci/images/imgNoCC_.gif"; 
        break; 
        case (49): 
        imgToSwap.src = "includes/sci/images/imgNoCC_.gif"; 
         break; 
        case (50): 
        imgToSwap.src = "includes/sci/images/imgNoCC_.gif"; 
        break; 
       case (51): 
        imgToSwap.src = "includes/sci/images/imgAmexCC_.gif"; 
        break; 
       case (52): 
        imgToSwap.src = "includes/sci/images/imgVisaCC_.gif"; 
        break; 
       case (53): 
        imgToSwap.src = "includes/sci/images/imgMcCC_.gif"; 
        break; 
       case (54): 
        imgToSwap.src = "includes/sci/images/imgDiscCC_.gif"; 
        break; 
       case (55): 
        imgToSwap.src = "includes/sci/images/imgNoCC_.gif"; 
        break; 
       case (56): 
        imgToSwap.src = "includes/sci/images/imgNoCC_.gif"; 
        break; 
       case (57): 
        imgToSwap.src = "includes/sci/images/imgNoCC_.gif"; 
        break; 
       case (96): 
        imgToSwap.src = "includes/sci/images/imgNoCC_.gif"; 
        break; 
       case (97): 
        imgToSwap.src = "includes/sci/images/imgNoCC_.gif"; 
        break; 
       case (98): 
        imgToSwap.src = "includes/sci/images/imgNoCC_.gif"; 
        break; 
       case (99): 
        imgToSwap.src = "includes/sci/images/imgAmexCC_.gif"; 
        break; 
       case (100): 
        imgToSwap.src = "includes/sci/images/imgVisaCC_.gif"; 
        break; 
       case (101): 
        imgToSwap.src = "includes/sci/images/imgMcCC_.gif"; 
        break; 
       case (102): 
        imgToSwap.src = "includes/sci/images/imgDiscCC_.gif"; 
        break; 
       case (103): 
        imgToSwap.src = "includes/sci/images/imgNoCC_.gif"; 
        break; 
       case (104): 
        imgToSwap.src = "includes/sci/images/imgNoCC_.gif"; 
        break; 
       case (105): 
        imgToSwap.src = "includes/sci/images/imgNoCC_.gif"; 
        break; 
      } 
     } 
    } 

Answer 2

下面我已經提供了一個完全註釋example如何做到這一點。

HTML

<input id="myid" type="text"> 
<img id="myimg" src="http://dummyimage.com/100x100/000/fff"> 

的JavaScript

window.onload = function() { // because we are grabbing DOM elements we need to ensure the elements are first loaded. 
    var elm = document.getElementById("myid"), 
     img = document.getElementById("myimg"); // here we grab the input box and the image 
    elm.onkeyup = function(event) { // capture the input keyup 
     if (this.value.length === 1) { // make sure we are only checking the first value 
      switch (event.keyCode) { // here we are running the switch statement against the keyup event keycode value 
      case (48): 
       img.src = "http://dummyimage.com/100x100/000/fff&text=0"; 
       break; 
      case (49): 
       img.src = "http://dummyimage.com/100x100/000/fff&text=1"; 
       break; 
      case (50): 
       img.src = "http://dummyimage.com/100x100/000/fff&text=2"; 
       break; 
      case (51): 
       img.src = "http://dummyimage.com/100x100/000/fff&text=3"; 
       break; 
      case (52): 
       img.src = "http://dummyimage.com/100x100/000/fff&text=4"; 
       break; 
      case (53): 
       img.src = "http://dummyimage.com/100x100/000/fff&text=5"; 
       break; 
      case (54): 
       img.src = "http://dummyimage.com/100x100/000/fff&text=6"; 
       break; 
      case (55): 
       img.src = "http://dummyimage.com/100x100/000/fff&text=7"; 
       break; 
      case (56): 
       img.src = "http://dummyimage.com/100x100/000/fff&text=8"; 
       break; 
      case (57): 
       img.src = "http://dummyimage.com/100x100/000/fff&text=9"; 
       break; 
      } 
     } 
    } 

}