将字符串与输入中的字符串进行比较时Javascript中的逻辑运算符

我希望将输入字段中给出的用户答案验证为现有值。我不知道我的方法是否正确，但我希望代码尽可能简单

这样做的目的是检查用户输入是否与第一个世界或第二个世界匹配，如果是，文本将变为“绿色”。输入的单词不会与任何一个世界匹配，而是变为“红色”和粗体。到目前为止，它所做的只是将任何输入的文本变为粗体和红色，但只有在删除else语句的情况下（！）

感谢您的帮助

<div id="quiz">
<p id="firstAnswer" value="Tiistai">Tiistai</p>
<p id="secondAnswer" value="Kedd">Kedd</p>
<input type="text" name="userText" id="userAnswer" value="" placeholder="...">
<br/><br/>
<input type="button" name="Busca" id="Busca" value="Check" onClick="ver()"; />
</div>

<script>

    var answer1 = document.getElementById('firstAnswer');
    var answer2 = document.getElementById('secondAnswer');
    var answer3 = document.getElementById('userAnswer');

    function ver(){ 
        if (answer1 != answer3 || answer2 != answer3){
            var element=document.getElementById("userAnswer");
            document.getElementById("userAnswer").style.fontWeight="bold";
            document.getElementById("userAnswer").style.color='red';
            };
        else {
            document.getElementById("userAnswer").style.fontWeight="bold";
            document.getElementById("userAnswer").style.color='green';
            };
        };

</script>

Tiistai
Kedd



var answer1=document.getElementById（'firstAnswer'）；
var answer2=document.getElementById（'secondAnswer'）；
var answer3=document.getElementById（'userAnswer'）；
函数ver（）{
如果（回答1！=回答3 | |回答2！=回答3）{
var元素=document.getElementById（“userAnswer”）；
document.getElementById（“userAnswer”）.style.fontwweight=“bold”；
document.getElementById（“userAnswer”）.style.color='red'；
};
否则{
document.getElementById（“userAnswer”）.style.fontwweight=“bold”；
document.getElementById（“userAnswer”）.style.color='green'；
};
};

它应该是：

if (answer1 != answer3 && answer2 != answer3){
                       ^^

var answer1 = document.getElementById("firstAnswer").innerHTML;
var answer2 = document.getElementById("secondAnswer").innerHTML;

function ver() {
    var answer3 = document.getElementById("userAnswer").value;
    if (answer1 == answer3 || answer2 == answer3) {
        document.getElementById("userAnswer").style.fontWeight="bold";
        document.getElementById("userAnswer").style.color='green';
    } else {
        document.getElementById("userAnswer").style.fontWeight="bold";
        document.getElementById("userAnswer").style.color='red';
    }
}

你没学过吗

或者只需反转

（如果

）即可简化：

if (answer1 == answer3 || answer2 == answer3) {
    document.getElementById("userAnswer").style.fontWeight="bold";
    document.getElementById("userAnswer").style.color='green';
} else {
    document.getElementById("userAnswer").style.fontWeight="bold";
    document.getElementById("userAnswer").style.color='red';
}

您也没有正确设置

answerX

变量。应该是：

if (answer1 != answer3 && answer2 != answer3){
                       ^^

var answer1 = document.getElementById("firstAnswer").innerHTML;
var answer2 = document.getElementById("secondAnswer").innerHTML;

function ver() {
    var answer3 = document.getElementById("userAnswer").value;
    if (answer1 == answer3 || answer2 == answer3) {
        document.getElementById("userAnswer").style.fontWeight="bold";
        document.getElementById("userAnswer").style.color='green';
    } else {
        document.getElementById("userAnswer").style.fontWeight="bold";
        document.getElementById("userAnswer").style.color='red';
    }
}

---

这里有几件事不对。首先，我是这样设置的：

HTML-

<div id="quiz">
    <p id="firstAnswer" data-value="Tiistai">Tiistai</p>
    <p id="secondAnswer" data-value="Kedd">Kedd</p>
    <input type="text" name="userText" id="userAnswer" value="" placeholder="..." />
    <br /><br />
    <input type="button" name="Busca" id="Busca" value="Check" onClick="ver()" />
</div>

演示：

在最近对该问题进行编辑之前，一个原始问题是

if

语句中比较的值是

元素，并且总是
==。立即更改变量以指向其
.value
s并不能解决此问题，原因如下

元素没有
值
属性，因此您应该在HTML中使用
数据值
，并使用
.getAttribute（）
获取属性。当然，您可以忽略
值
/
数据值
属性，并使用
innerHTML
/
innerText
/
textContent
，但如果您希望将这些内容的格式设置为与实际值不同的格式，我希望将它们分开<代码>数据值
应包含要比较/接受的原始值

作为奖励，您不必使用
getAttribute（）
，而是可以了解
dataset
：

另外，您的
if
语句有一个
在它的末尾，这会把
其他的
搞得一团糟

另外，您的
if
语句逻辑有点奇怪-它的计算结果总是
true
，因为用户的答案总是满足其中一个条件（如果不是同时满足这两个条件的话）

作为建议，我将切换特定的
类
，而不是设置DOM元素的
.style
属性。它只是让追踪更容易

作为奖励，您可以了解
classList
：
answer1
，
answer2
，以及
answer3
引用DOM元素（这就是
document.getElementById
返回的内容）。您需要使用
.value
获取它们的值。然后比较输入的值感谢回复，但是，添加.value没有帮助，结果是一样的。对不起，我没有完全查看HTML。为什么要在
元素上设置
值
？它们没有
值
属性您有一个错位的
在
if（）{}
之后。这使得
if-else
语句无效。在
else{}
和
函数ver（）{}
之后也有它们，但是它们是无害的。谢谢！更正了它们，但它仍然只是将文本变为红色：/不走运，但至少现在它将所有文本变为红色；）添加了更多的修复程序和JSFIDLE演示，我想您可以使用
.textContent
而不是任何属性：-）@Bergi我正在更新（刚刚完成）我的答案。当然是一个选项，但如果你想显示格式/其他内容，我认为使用属性“更安全”。当然，在这个代码/示例中，这些值是完全相同的，但在不同的情况下，它们可能不会完全相同be@Ian我同意依赖数据属性更安全，这就是我要做的（实际上我会在内存中有一个模型，而不是查询DOM），然而，
textContent
只会抓取文本内容，所以格式不应该是一个问题。@plalx如我所说，如果有更多信息，例如括号内的提示，那么它会抓取太多。关于格式设置，您是对的，但是额外的空白可能是一个问题。显然你可以修剪，但仍然