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

Question

我想验证用户在输入字段中对现有值的回答。我不知道我是否走对了，但我想让代码尽可能简单。

这个想法是检查用户输入是否匹配第一个或第二个世界，如果是，则文本变为“绿色”输入的单词与它变为“红色”和粗体的任何世界都不匹配。到目前为止，它所做的只是将输入的任何文本变为粗体和红色，但只有（！）如果我删除 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>

Answer 1

应该是：

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

你没学过deMorgan's Law吗？

或者只是反转您的if 以简化它：

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 变量。应该是：

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';
    }
}

DEMO

Answer 2

这里有几个问题。首先，我是这样设置的：

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>

JS-

var answer1Element = document.getElementById('firstAnswer'),
    answer2Element = document.getElementById('secondAnswer'),
    userAnswerElement = document.getElementById("userAnswer");

function ver() {
    var answer1, answer2, userAnswer;
    answer1 = answer1Element.getAttribute("data-value");
    answer2 = answer2Element.getAttribute("data-value");
    userAnswer = userAnswerElement.value;
    if (answer1 !== userAnswer && answer2 !== userAnswer) {
        userAnswerElement.style.fontWeight = "bold";
        userAnswerElement.style.color = 'red';
    } else {
        userAnswerElement.style.fontWeight = "bold";
        userAnswerElement.style.color = 'green';
    }
}

演示： http://jsfiddle.net/RS5US/

在最近对该问题进行编辑之前，最初的问题是if 语句中比较的值是Elements，并且始终是!==。立即将变量更改为指向它们的 .values 并不能解决问题，原因如下。

<p> 元素没有value 属性，因此您应该在HTML 中使用data-value 并使用.getAttribute() 获取属性。当然，您可以忽略value/data-value 属性并使用innerHTML/innerText/textContent，但是当您可能想要格式化与实际值不同的格式时，我喜欢将这些内容分开. data-value 应该包含您要比较/接受的原始值。

作为奖励，您可以了解dataset，而不是使用getAttribute()：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset

另外，您的if 语句末尾有一个;，这弄乱了else。

此外，您的 if 语句逻辑有点奇怪 - 它总是会评估为 true，因为用户的答案总是满足其中一个条件（如果不是同时满足两个条件）。

作为建议 - 我会切换特定的 class 而不是设置 DOM 元素的 .style 属性。它只是让它更容易跟踪。

作为奖励，您可以了解classList：https://developer.mozilla.org/en-US/docs/Web/API/Element.classList