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 に答える