在array == array时显示图像

Question

我的jquery有问题，我需要在输入中询问一个问题，如果输入等于数组那么它必须用awnser数组显示text2但我没有错误但它不起作用。

<section>
        <img id="samen" src="img/samen.svg" alt="samen">
        <img id="klein" src="img/klein.svg" alt="klein">
        <div id="text1">
        <p>Vb.: Professor waarvoor staat html?</p>
        <p>antwoord: HyperText Markup Language</p>
        <input type="text" name="vraag" id="vraag" onkeypress="keyCode(event)" placeholder="Professor, mag ik iets vragen?" required/><br>
        <input id="button" type="submit" name="button" value="wat kan ik stellen?" />
        </div>
        <img id="groot" src="img/groot.svg" alt="groot">
        <div id="text2">
            <p id="arraytext"></p>
        </div>
    </section>  
</main>
<footer>
    <img id="logo" src="img/logo.png" alt="logo">
</footer>
<script>
    var vragen = ["is het gif of jif?"];
    var antwoorden = ["Het is Gif tenzij je de historie kent."];
    var input = $("#vraag").val();
    document.getElementById('button').onclick = function() {
        alert("- Is het gif of jif?"+"\n"+"- ");
    }

    function keyCode(event) {
        var x = event.which || event.keyCode;
            if (x == 13) {
                if(input == vragen){
                    event.preventDefault();
                   $('#text2').css('display', 'inline-block');
                }
                else{
                    event.preventDefault();
                }
            }
    }
</script>

Answer 1

这里有一些问题。首先，当你这样做时：

var input = $("#vraag").val();

您在页面加载时立即获得一次输入值，并且只获取一次输入值。所以input只会是一个空字符串。我怀疑你是想在函数本身中获取输入值：

function keyCode(event) {
    var input = $("#vraag").val();
    // the rest of your code...
}

这样它在函数执行时获取输入，而不是在页面加载时获取。

此外，这当然不会起作用：

if(input == vragen){

因为其中一个是字符串而另一个是字符串数组。苹果永远不会像一篮子苹果一样。您是否要检查数组是否包含该字符串值？那将是这样的：

if(vragen.includes(input)){

或者，没有使用.includes()，这：

if(vragen.indexOf(input) > -1){

当然值得注意的是，这只会匹配确切的字符串：

"is het gif of jif?"

如果用户输入任何不同的东西，即使只是在字母上使用不同的外壳，那么它将不再精确且不匹配。您如何解决这个问题取决于预期的功能以及您要完成的任务。 “足够接近”很快就会变得非常复杂，具体取决于你如何定义它。