how to get the input value and then check that against all of an arrays object values at the 0 index

user_14101656 0
Viewed 64

Title says it all.

I have an array of objects shown in the code below. Each object has two values, a type and a weakness. I want a user to be able to put a type into the input field, and then when submitted, check that input value against all of the objects 0 index values. Upon match, I want to return the matching objects 1 index value. I guess I am just too new and missing the easy setup. Can anyone help? I am new to programming (4 months, self taught), and trying to figure this out, so be gentle. :)

const form = document.querySelector("#main");

const button = document.querySelector("#submit");

const types = [
{
    type: "normal",
    weakness: "fighting",
}
];



let results = [];


form.addEventListener("submit", (e) => {
    e.preventDefault();
    let result = document.getElementById("type-input").value.toLowerCase();


    function checkType() {
        if (result.match(types.indexOf[0])) {
            console.log('Yay!');
        };
    };

    checkType();

    form.reset();
});
match events input arrays javascript
2 Answers

You could use find to check if the object with the input in in the object or not

const types = [ { type: "normal", weakness: "fighting", }, { type: "fighting", weakness: "flying, psychic, fairy", }, { type: "flying", weakness: "rock, electric, ice", }, { type: "poison", weakness: "ground, psychic", }, { type: "ground", weakness: "water, grass, ice", }, { type: "rock", weakness: "fighting, ground, steel, water, grass", }, { type: "bug", weakness: "flying, rock, fire", }, { type: "ghost", weakness: "ghost, dark", }, { type: "steel", weakness: "fighting, ground, fire", }, { type: "fire", weakness: "ground, rock, water", }, { type: "water", weakness: "grass, electric", }, { type: "grass", weakness: "flying, poison, bug, fire, ice", }, { type: "electric", weakness: "ground", }, { type: "psychic", weakness: "bug, ghost, dark", }, { type: "ice", weakness: "fighting, rock, steel, fire", }, { type: "dragon", weakness: "ice, dragon, fairy", }, { type: "dark", weakness: "fighting, bug, fairy", }, { type: "fairy", weakness: "poison, ghost, dragon", }, ];

input = "dark";

findType = (input) => {
  let obj = types.find((o) => o.type == input);
  return obj ? obj.weakness : console.log("Object Not FOUND");
};

console.log(findType(input));

user_99220110

my way..

const types = 
      [ { type: 'normal',   weakness: 'fighting'                              } 
      , { type: 'fighting', weakness: 'flying, psychic, fairy'                } 
      , { type: 'flying',   weakness: 'rock, electric, ice'                   } 
      , { type: 'poison',   weakness: 'ground, psychic'                       } 
      , { type: 'ground',   weakness: 'water, grass, ice'                     } 
      , { type: 'rock',     weakness: 'fighting, ground, steel, water, grass' } 
      , { type: 'bug',      weakness: 'flying, rock, fire'                    } 
      , { type: 'ghost',    weakness: 'ghost, dark'                           } 
      , { type: 'steel',    weakness: 'fighting, ground, fire'                } 
      , { type: 'fire',     weakness: 'ground, rock, water'                   } 
      , { type: 'water',    weakness: 'grass, electric'                       } 
      , { type: 'grass',    weakness: 'flying, poison, bug, fire, ice'        } 
      , { type: 'electric', weakness: 'ground'                                } 
      , { type: 'psychic',  weakness: 'bug, ghost, dark'                      } 
      , { type: 'ice',      weakness: 'fighting, rock, steel, fire'           } 
      , { type: 'dragon',   weakness: 'ice, dragon, fairy'                    } 
      , { type: 'dark',     weakness: 'fighting, bug, fairy'                  } 
      , { type: 'fairy',    weakness: 'poison, ghost, dragon'                 } 
      ] 

const myForm = document.querySelector('#my-form')
  ;
myForm.onsubmit = e =>
  {
  e.preventDefault()
  let result = myForm['type-input'].value.trim().toLowerCase()
    , rowfind = types.find(x=>x.type===result)
    ;
  if(rowfind) console.log(rowfind.weakness )

  myForm.reset()
  }
<form action="xxx" id="my-form">
  <input type="text" name="type-input" >
  <button type="submit"> submit </button>
</form>

user_106690100
Related