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

顺便说一句，我知道你正在学习，所以从基础开始是正确的，但请记住，有更简洁的方法可以做到这一点。

希望它对你有所帮助。

在switch语句中更改图像

1 个答案: