0

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

1 回答 1

0

你的错误在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;
    };

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

希望对你有帮助。

于 2013-04-07T17:07:12.327 回答