Question

我在段落中有一些空格，要求在写入时输入正确的单词。我有一个函数检查单词是否正确，另一个函数会将输入的错误单词的字体更改为红色。

有谁知道我在这段代码中出错了？当我没有调用font（）函数时，isCorrect（）函数有效，但我不知道font（）函数会出现什么问题。

由于

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

问题是你在字体函数中传递了错误的对象。从赋值中删除innerHtml。

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

而是在字体函数

中传递此对象

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

因为document.getElementById("word1").style是一个不是document.getElementById("word1").innerhtml.style

的对象

但是你需要innerhtml对象

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

Answer 2

在font function您发送innerHMTL值时，您无法更改style的{{1}}。

而是发送innerHMTL

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"; } }元素发送到DOM函数。
然后在里面我比较了font

在Javascript中验证空格

2 个答案: