проверить элемент в массиве, если есть напечатанный текст c в JS / HTML

Question

Итак, я работаю в сфере ИТ уже около 7 лет, однако я никогда не занимал должность, занимающую тонну программирования. Мне нравится программировать, но на данный момент я просто хобби, просто чтобы дать вам некоторое представление о моем уровне кодирования.

Я пытаюсь создать страницу HTML с текстом перед поле ввода, за которым следует кнопка. Кнопка будет выполнять функцию при нажатии, я хочу, чтобы эта функция принимала ввод и запускала его для массива, если элемент существует в массиве, то я хочу, чтобы он напечатал указанное c сообщение. Это сообщение отличается для каждого элемента в массиве.

Чтобы дать вам представление о том, что я делаю, это для моей игры "Подземелья и драконы", в которой выполняется проклятие страда, где есть последовательность Карты Dr aws созданы, чтобы помочь вам в приключениях. скажем, они вытягивают карту, я помещаю слово «Мститель» в поле ввода, оно существует в массиве, затем я хочу, чтобы оно напечатало «Сокровище лежит в доме драконов, в руках, когда-то чистых, теперь испорченных». Я знаю, что мог бы просто записать все это, но я думал, что сделаю из этого забавный проект. Я собрал воедино то, что, по моему мнению, должно работать, однако, когда я нажимаю кнопку, ничего не происходит.

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

Массив там, заполненный примерно 40 именами, мститель, паладин, воин, жулик, чародей и т. Д. c.

    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.")
        }

и т. c, и т. Д. 1021 *, через весь список 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

Ваш лог c немного запутался. indexOf будет возвращать положительное число всякий раз, когда вход найден в массиве. Таким образом, только первый оператор if будет выполнен. Функция map - хороший способ для go, но если вы только начинаете, программирование basi c поможет. Объекты имеют ключи и атрибуты. Рассмотрим:

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>

Answer 2

Давайте дважды проверим ваш HTML:

  <p>Type a card name and click submit</p> <!-- Make sure you have opening and closing tags -->
  <input type="text" id="card1" name="card1" /> <!-- Inputs are self-closing -->
  <button type="button" onclick="CARD1();">Submit</button> <!-- Give your button a type "button" to prevent any wacky default behavior -->

Еще один вопрос: вы видите ошибки консоли? Особенно я подозреваю, что вы увидите

Uncaught TypeError: CARD1.indexOf is not a function

Если вы видите это, я подозреваю, что ваша проблема в том, что вы объявляете имя переменной card1, но вы проверяете CARD1.indexOf. (CAsing важен ?)

Далее, у вас есть небольшая путаница относительно того, как вы используете indexOf. По сути, использование indexOf задает вопрос: «По какому индексу находится значение, которое я передаю, найдено в массиве, из которого я вызываю?» Так, например, ["avenger", "paladin"].indexOf("avenger") всегда будет возвращать 0 (нулевую позицию в массиве).

Я бы посоветовал вам перейти от цепочки if / else к более продвинутой JS (и на самом деле программирование в целом) концепция, карта - которая в JS в основном просто объект. Вот простое решение:

var textReceived = document.getElementById('card1').value;
// The variable name "textReceived" is more descriptive than "card1"
const cardTextMap = {
  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.',
  // ... all the other cards
};

// Now we'll check to see if the card name is found in the Object named "cardTextMap".
// We use square bracket notation instead of dot notation, because using square bracket
// allows us to pass a dynamic value as a key, i.e. the value of "textReceived"
if (cardTextMap[textReceived]) {
  // If we found a value inside of cardTextMap that matched what was typed,
  // e.g. cardTextMap.avenger (which can also be written `cardTextMap["avenger"]`),
  // then alert that value
  alert(cardTextMap[textReceived]);
} else {
  // If the user typed something that's not in the Map,
  // then cardTextMap[textReceived] will evaluate to `undefined` which
  // is "falsey" in JavaScript, so we'll fall into this else block:
  alert('Could not find the card you typed');
}