更改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，我看你是学习所以从基础开始是正确的，但请记住，有更干净的方法可以做到这一点。

希望对你有帮助。