更改switch語句中的圖像

Question

我在我的HTML中有一個圖像，但我想在用戶給出答案時更改圖像。出於某種原因，第一個功能的作品，但圖像不會改變..有人可以幫助我。

這是我到目前爲止的代碼：

window.onload = function() { 
    'use strict'; 

    var showMessage = function (text) { 
     var messageCenter = document.getElementById('messageCenter'); 
     messageCenter.innerHTML += "<p>" + text + "</p>\n"; 
    }; 

    var checkName = function (name) { 
     switch (prompt("What is your name?")) { 
      case "Leonard": 
       showMessage("Leonard! How did I not recognize you! Why would you like to get rid of me!"); 
       break; 
      case "Penny": 
       showMessage("Penny Penny Penny! You've got so much to learn."); 
       break; 
      case "Howard": 
       showMessage("Howard, the only one without a Ph.D"); 
       break; 
      case "Raj": 
       showMessage("Interesting. You're afraid of insects and women. Ladybugs must render you catatonic!"); 
       break; 
      default: 
       showMessage("Well, I'm not familiair with you. I don't like to talk to strange people."); 
       break; 
     } 
    }; 
    checkName() 

    var myImage = document.getElementById('sheldon'); 
    var checkCase = function (img) { 
     switch (img) { 
      case "Leonard": 
       myImage("verbaasd.jpg"); 
       break; 
      case "Penny": 
       myImage("les.jpg"); 
       break; 
      case "Howard": 
       myImage("howard.jpg"); 
       break; 
      case "Raj": 
       myImage("loser.jpg"); 
       break; 
      default: 
       myImage("sheldon.jpg"); 
       break; 
     } 
    }; 
    checkCase() 
}; 

Answer 1

你的錯誤是在myImage()。您可以使用DOM對象設置該變量，並將其作爲普通函數調用。這給你一個錯誤。您也忘記存儲名稱，並將其作爲參數傳遞給您的檢查功能。

你的代碼應該是：

window.onload = function() { 
    'use strict'; 

    var name = prompt("What is your name?"); 

    var showMessage = function showMessage(text) { 
     var messageCenter = document.getElementById('messageCenter'); 
     messageCenter.innerHTML += "<p>" + text + "</p>\n"; 
    }; 

    var checkName = function (name) { 
     switch (name) { 
      case "Leonard": 
       showMessage("Leonard! How did I not recognize you! Why would you like to get rid of me!"); 
       break; 
      case "Penny": 
       showMessage("Penny Penny Penny! You've got so much to learn."); 
       break; 
      case "Howard": 
       showMessage("Howard, the only one without a Ph.D"); 
       break; 
      case "Raj": 
       showMessage("Interesting. You're afraid of insects and women. Ladybugs must render you catatonic!"); 
       break; 
      default: 
       showMessage("Well, I'm not familiair with you. I don't like to talk to strange people."); 
       break; 
     } 
    }; 
    checkName(name); 

    var myImage = function myImage(img) { 
     var sheldon = document.getElementById('sheldon'); 
     sheldon.innerHTML = '<img src="' + img + '"/>'; 
    }; 

    var checkCase = function (name) { 
     switch (name) { 
      case "Leonard": 
       myImage("verbaasd.jpg"); 
       break; 
      case "Penny": 
       myImage("les.jpg"); 
       break; 
      case "Howard": 
       myImage("howard.jpg"); 
       break; 
      case "Raj": 
       myImage("loser.jpg"); 
       break; 
      default: 
       myImage("sheldon.jpg"); 
       break; 
     } 
    }; 
    checkCase(name); 
}; 

現在你myImage()是插入一個新的形象的容器內用ID sheldon功能。

如果你不希望有圖像的容器，而是你要直接參考的圖像，可以更改myImage()功能：

var myImage = function myImage(img) { 
     var sheldon = document.getElementById('sheldon'); 
     sheldon.src = img; 
    }; 

BTW，我看你是學習所以從基礎開始是正確的，但請記住，有更乾淨的方法可以做到這一點。

希望對你有幫助。