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

这里有几个问题。首先，这是我如何设置它：

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

DEMO： http://jsfiddle.net/RS5US/

在最近对该问题进行修改之前，原始问题是if语句中的比较值为Element s，且始终为!==。由于以下原因，立即将变量更改为指向.value s并未解决此问题。

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

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

，而不是使用dataset。

此外，您的if语句末尾有;，这使else搞得一团糟。

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

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

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

Answer 2

应该是：

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

从输入比较字符串到字符串的Javascript中的逻辑运算符

2 个答案: