更改switch語句中的圖像

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

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

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() 
};

來源

2013-04-03 Mononootje

您可以在'switch'塊或'showMessage'函數或其他函數中執行此操作。你有沒有嘗試過？這種嘗試以什麼方式不起作用？ – David 2013-04-03 19:30:05

爲什麼你不試試，讓我們知道它是如何工作的！ – jahroy 2013-04-03 19:30:09

老師說我不得不使用另一個函數，但是我不知道如何開始:( – Mononootje 2013-04-03 19:33:16

你的錯誤是在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，我看你是學習所以從基礎開始是正確的，但請記住，有更乾淨的方法可以做到這一點。

希望對你有幫助。

來源

2013-04-07 17:07:12 Ragnarokkr

更改switch語句中的圖像

回答

相關問題