javascript - 检查数组中的项目，是否有打印 JS/HTML 中的特定文本

Question

我在 IT 领域工作了大约 7 年，但我从未担任过涉及大量编码的职位。我喜欢编码，但目前只是一个业余爱好者，只是为了让您了解我的编码熟练程度。

我正在尝试创建一个 HTML 页面，该页面在输入框之前有一些文本，后跟一个按钮。该按钮将在单击时执行一个函数，我希望该函数获取输入并对数组运行它，如果该项目存在于数组中，那么我希望它打印一条特定的消息。对于数组中的每个项目，此消息都不同。

为了让你了解我在做什么，这是我的《龙与地下城》游戏，运行斯特拉德的诅咒，其中有一部分会进行一系列抽牌来帮助你完成冒险。所以说他们抽一张牌，我在输入框中输入“复仇者”一词，它确实存在于数组中，然后我希望它打印“宝藏位于龙之屋，手中曾经干净，现在已损坏。”我知道我可以把它全部写下来，但我想我会用它来做一个有趣的项目。我已经拼凑了我认为应该起作用的东西，但是当我按下按钮时什么也没有发生。

<script>
    var LowCards ["avenger", "paladin",}

数组在那里，填充了大约 40 个名字，复仇者、圣骑士、战士、盗贼、附魔师等。

    function CARD1()
    {
        var card1 = document.getElementByID('card1').value;
        if(CARD1.indexOf("avenger") !== -1){
        alert("The treasure lies in a dragons house, in hands once clean, now corrupted.")
        } else if{CARD1.indexOf("paladin") !== -1){
        alert("I see a sleeping prince, a servant of light and the brother of darkness. The treasure lies 
        with him.")
        }

等等，等等，通过整个 40 个列表，直到最后一个声明，如果它不存在，请告诉他们它不存在。

        else{
        alert("Value does not exists!")
        }
    }
</script>

所以函数是在主体之前声明的，在主体中我尝试用按钮拉动函数

<input type="text" id="card1" name="card1"=>Enter the name of the first card drawn</input>
<button onclick="CARD1();">Submit</button>
</p>

Answer 1

你的逻辑有点困惑。只要在数组中找到输入，indexOf 就会返回正数。因此只有第一个 if 语句会被执行。 map 函数是一个很好的方法，但如果您刚刚开始基本编程就可以了。对象有键和属性。考虑:

var LowCards = {avenger:"The treasure lies in a dragons house, in hands once
                clean, now corrupted.", paladin:"I see a sleeping prince, a 
                servant of light and the brother of darkness. The treasure 
                lies with him."};

avenger and paladin are keys and the associated text in quotes are the attributes.

var keys = Object.keys(LowCards);  
will get create an array called keys with each key.

var LowCards ={avenger:"The treasure lies in a dragons house, in hands once clean, now corrupted.", paladin:"I see a sleeping prince, a servant of light and the brother of darkness. The treasure lies with him."};


    function CARD1()
    {
        var card1 = document.getElementById('card1').value;        
        var keys = Object.keys(LowCards);  
        var len = keys.length;
        
        
        for(let i = 0; i< len;i++){           
           if (card1 == keys[i]) {
              alert(LowCards[card1]);
              return;
           }   
        }
        
        alert("the value does not exist");
        return;
        
        
        
    }

<input type="text" id="card1" name="card1">Enter the name of the first card drawn
<button onclick="CARD1();">Submit</button>