验证Javascript中的空格

Question

I have some blank spaces in a paragraph that requires the correct word to be entered when written into it. I have a function checking if the words are correct and another that will change the font of the incorrect word entered to be red.

Does anyone know where I went wrong in this code? The isCorrect() function works when I am not calling the font() function, but I don't know what would be wrong with the font() function.

Thanks

function isCorrect(){
    var word1 = document.getElementById("word1").innerHTML;
    var word2 = document.getElementById("word2").innerHTML;
    var word3 = document.getElementById("word3").innerHTML;
    var word4 = document.getElementById("word4").innerHTML;
    var word5 = document.getElementById("word5").innerHTML;
    var word6 = document.getElementById("word6").innerHTML;
    var word7 = document.getElementById("word7").innerHTML;

    font(word1, word2, word3, word4, word5, word6, word7);


    if (word1 == "digg" && word2 == "face" && word3 == "book" && word4 == "tumbled" && word5 == "linked" && word6 == "interest" && word7 == "follow")
    {
        alert("Correct");
    }
    else
    {
        alert("Not Correct");
    }
}

//if wrong word is entered, it should turn red
function font(word1, word2, word3, word4, word5, word6, word7)
{
    if (word1 != "digg")
    {
        word1.style.color = "red";
    }

    else
    {
        word1.style.color = "white";
    }

    if (word2 != "face")
    {
        word2.style.color = "red";
    }
    else
    {
        word2.style.color = "white";
    }

    if (word3 != "book")
    {
        word3.style.color = "red";
    }
    else
    {
        word3.style.color = "white";
    }


    if (word4 != "tumbled")
    {
        word4.style.color = "red";
    }
    else
    {
        word4.style.color = "white";
    }

    if (word5 != "linked")
    {
        word5.style.color = "red";
    }
    else
    {
        word5.style.color = "white";
    }

    if (word6 != "interest")
    {
        word6.style.color = "red";
    }
    else
    {
        word6.style.color = "white";
    }

    if (word7 != "follow")
    {
        word7.style.color = "red";
    }
    else
    {
        word7.style.color = "white";
    }

}

Answer 1

The problem is you are passing wrong object in the font function. Remove the innerHtml from the assignment.

var word1 = document.getElementById("word1").innerHTML;

instead pass this object inside the font function

var word1 = document.getElementById("word1");

Because document.getElementById("word1").style is an object not document.getElementById("word1").innerhtml.style

But here you need innerhtml object

if (word1 == "digg" && word2 == "face" && word3 == "book" && word4 == "tumbled" && word5 == "linked" && word6 == "interest" && word7 == "follow")
{
    alert("Correct");
}
else
{
    alert("Not Correct");
}

Answer 2

In your font function you are sending innerHMTL value, so you cant change style for that innerHMTL .

Instead send document.getElementById("word1")

function isCorrect(){
    var word1 = document.getElementById("word1");
    var word2 = document.getElementById("word2");
    var word3 = document.getElementById("word3");
    var word4 = document.getElementById("word4");
    var word5 = document.getElementById("word5");
    var word6 = document.getElementById("word6");
    var word7 = document.getElementById("word7");

    font(word1, word2, word3, word4, word5, word6, word7);


    if (word1.innerHTML == "digg" && word2.innerHTML == "face" && word3.innerHTML == "book" && word4.innerHTML == "tumbled" && word5.innerHTML == "linked" && word6.innerHTML == "interest" && word7.innerHTML == "follow")
    {
        alert("Correct");
    }
    else
    {
        alert("Not Correct");
    }
}

//if wrong word is entered, it should turn red
function font(word1, word2, word3, word4, word5, word6, word7)
{
    if (word1.innerHTML != "digg")
    {
        word1.style.color = "red";
    }

    else
    {
        word1.style.color = "white";
    }

    if (word2.innerHTML != "face")
    {
        word2.style.color = "red";
    }
    else
    {
        word2.style.color = "white";
    }

    if (word3.innerHTML != "book")
    {
        word3.style.color = "red";
    }
    else
    {
        word3.style.color = "white";
    }


    if (word4.innerHTML != "tumbled")
    {
        word4.style.color = "red";
    }
    else
    {
        word4.style.color = "white";
    }

    if (word5.innerHTML != "linked")
    {
        word5.style.color = "red";
    }
    else
    {
        word5.style.color = "white";
    }

    if (word6.innerHTML != "interest")
    {
        word6.style.color = "red";
    }
    else
    {
        word6.style.color = "white";
    }

    if (word7.innerHTML != "follow")
    {
        word7.style.color = "red";
    }
    else
    {
        word7.style.color = "white";
    }

}

• I sent complete DOM elements into font function.
• Then inside that I compared the word1.innerHTML