更改在带有图像的测验中向用户显示的结果

Changing the results shown to user in a quiz with images

本文关键字：用户显示结果图像更新时间：2023-09-26

我正在做一个性格测验，用户在答案之间进行选择，这些答案都有不同的分数值，这些分数都有助于他们的分数。他们的分数改变了结果，并告诉他们他们的个性。对于结果，我想在图像旁边显示一条小消息。图像应根据他们的分数而变化。我的问题是无论我输入什么分数，用户都只会看到第一个可能的结果。我添加了console.logs来检查他们的分数是否被计算在内，确实如此。我觉得我很接近，但我肯定错过了一些东西......

function computeAnswers(){
    var score = 0;
    var answers = document.getElementsByClassName("answerswer");
    for (i = 0; i < answers.length; i++){
        if (answers[i].checked){
            if (answers[i].value === "groot"){
                score += 1;
            }
            else if(answers[i].value === "starlord"){
                score += 2;
            }
            else if(answers[i].value === "rocket"){
                score += 3;
            }
            else if(answers[i].value === "gamora"){
                score += 4;
            }
            else if(answers[i].value === "drax"){
                score += 5;
            }
            else{
                console.log("This function's facked");
            }
        }
    }

    var groot = new Image();
    groot.src = "groot.jpg";
    var starLord = new Image();
    starLord.src = "starlord.jpg";
    var rocket = new Image();
    rocket.src = "rocket.jpg"
    var gamora = new Image();
    gamora.src = "gamora.jpg"
    var drax = new Image();
    drax.src = "drax.jpg"
    if(score >= 0 <= 10){
        document.getElementById("results").innerHTML = "You are groot!";
        document.body.appendChild(groot);
        console.log(score);
    }
    else if(score >= 11 <= 20){
        document.getElementById("results").innerHTML = "I've heard of you! You're Star-Lord!";
        document.body.appendChild(starLord);
        console.log(score);
    }
    else if(score >= 21 <= 30){
        document.getElementById("results").innerHTML = "You're Rocket! And don't forget it!";
        document.body.appendChild(rocket);
        console.log(score);
    }
    else if(score >= 31 <= 40){
        document.getElementById("results").innerHTML = "You are the beautiful and deadly assassin Gamora!";
        document.body.appendChild(gamora);
        console.log(score);
    }
    else if(score >= 41 <= 50){
        document.getElementById("results").innerHTML = "You are the fearsome warrior Drax The Destroyer!";
        document.body.appendChild(drax);
        console.log(score);
    }
    else{
        console.log("This function is also facked");
    }
}

我认为它在你的 if 语句中重新得分。您是否实际上通过上述编码获得了正确的消息，但只是没有获得图像？还是你也得不到？

例如，在您的第一个中，如果您更改以下内容会发生什么：

if(score >= 0 <= 10){
        document.getElementById("results").innerHTML = "You are groot!";
        document.body.appendChild(groot);
        console.log(score);
    }

自

if(score <= 10){
        document.getElementById("results").innerHTML = "You are groot!";
        document.body.appendChild(groot);
        console.log(score);
    }

如果这解决了问题，那么更改所有这些应该可以做到。当然，您需要适当地更改它们以适应您想要的值。

好吧，也许这有帮助。

正如@jeff所说，您必须将score >= 0 <= 10更改为score >= 0 && score <= 10：

function computeAnswers(){
    var score = 0;
    var answers = document.getElementsByClassName("answerswer");
    answers = [
        {
            checked:  true,
            value: 'drax'
        },
        {
            checked:  true,
            value: 'drax'
        },
        {
            checked:  true,
            value: 'gamora'
        },
        {
            checked:  true,
            value: 'drax'
        }
    ];
    for (i = 0; i < answers.length; i++){
        if (answers[i].checked){
            if (answers[i].value === "groot"){
                score += 1;
            }
            else if(answers[i].value === "starlord"){
                score += 2;
            }
            else if(answers[i].value === "rocket"){
                score += 3;
            }
            else if(answers[i].value === "gamora"){
                score += 4;
            }
            else if(answers[i].value === "drax"){
                score += 5;
            }
            else{
                console.log("This function's facked");
            }
        }
    }

    var groot = new Image();
    groot.src = "http://orig04.deviantart.net/2c42/f/2014/224/5/7/i_am_groot___non_animated__by_milkycherry-d7uxumf.png";
    var starLord = new Image();
    starLord.src = "https://33.media.tumblr.com/avatar_974f79659bbf_128.png";
    var rocket = new Image();
    rocket.src = "http://ecx.images-amazon.com/images/I/41pM7y%2BJQOL._SS36_.jpg"
    var gamora = new Image();
    gamora.src = "https://p.dreamwidth.org/657a0566c4c3/-/img.photobucket.com/albums/v28/FamiraD/GotG_1/byfamira_036a.png"
    var drax = new Image();
    drax.src = "http://i.ebayimg.com/images/g/jVgAAOSw9r1WAeBC/s-l64.jpg"
    if(score >= 0 && score <= 10){
        document.getElementById("results").innerHTML = "You are groot!";
        document.body.appendChild(groot);
        console.log(score);
    }
    else if(score >= 11 && score <= 20){
        document.getElementById("results").innerHTML = "I've heard of you! You're Star-Lord!";
        document.body.appendChild(starLord);
        console.log(score);
    }
    else if(score >= 21 && score <= 30){
        document.getElementById("results").innerHTML = "You're Rocket! And don't forget it!";
        document.body.appendChild(rocket);
        console.log(score);
    }
    else if(score >= 31 && score <= 40){
        document.getElementById("results").innerHTML = "You are the beautiful and deadly assassin Gamora!";
        document.body.appendChild(gamora);
        console.log(score);
    }
    else if(score >= 41 && score <= 50){
        document.getElementById("results").innerHTML = "You are the fearsome warrior Drax The Destroyer!";
        document.body.appendChild(drax);
        console.log(score);
    }
    else{
        console.log("This function is also facked");
    }
}
computeAnswers();