How do I take a user's input and return the value of a matching variable I have defined?

Question

1. User puts in three letter code
2. Function finds a variable with the same three letter code
3. If the number assigned to this variable is > 10200, alert "YES"

 var form = document.getElementById("airportForm") var input = document.getElementById("airport") //user input from form var airport = { lax : 12091, jfk : 14511, ewr : 11000, lga : 7003, phl : 10506, dca : 7169, iad : 11500, bos : 10083, btv : 8320, mht : 9250, pwm : 7200, npt : 2999, hpn : 6549, bdl : 9510, bwi : 10502, pit : 11500, ord: 13001, mdw : 6522, ind : 11200, lax : 12091, sfo : 11870, san : 9401, las : 14510, sea : 11901, dfw : 13401, aus : 12248, atl : 11890, pbi : 10008, mco : 12005, lhr : 12799, lgw : 10364, man : 10000, lcy : 4948, dub : 8652, snn : 10495, cdg : 13829, ory : 11975, mad : 14272, bcn : 11654, opo : 11417, lis : 12484, dxb : 13123, auh : 13451, dwc : 14764, jed : 12467, ruh : 13796, kwi : 11483, ebl : 13891, sda : 13123, tlv : 11998, amm : 12008, cai : 13120, jnb : 14495, cpt : 10502, dkr : 11450, cmn : 12205, rak : 10171, mem : 11120, dme : 12448, svo : 12139, aua : 8999, hav : 13123, hkg : 12467, pvg : 13123, pek : 14764, bkk : 13123, cgk : 12008, sin1 : 13123, //CANNOT USE SIN... can : 12467, syd : 12999, mel : 11998, bne : 11680, per : 11299, akl : 11926, nrt : 13123, hnd : 9839, tas : 13123, rix : 8366, ham : 12028, osl : 11811, cph : 11811, hel : 11286, arn : 10830, kef : 10056 } //Uses user input to get relevant value from airport object var airportNumber = (airport[input]); function capable() { input.toLowerCase; alert(airportNumber) if (airportNumber >= 10200) { alert("YES") } else { alert("NO") } } 

 <form id="airportForm" action="form_action.asp"> Airport: <input id="airport" type="text" name="airport"> </form> <button onclick="capable()">Submit</button> 

It seems that everything is working, but in function capable(), when it alerts airportNumber, it alerts 'undefined.'

There is obviously a missed connection between the user's input and my list of variables. Does anybody know what I have done wrong?

Answer 1

It's because you were reading airportNumber and input only on page load, but you need to load it upon every input, so I put it on top of the capable function:

 var form = document.getElementById("airportForm") //user input from form var airports = { lax: 12091, jfk: 14511, ewr: 11000, lga: 7003, phl: 10506, dca: 7169, iad: 11500, bos: 10083, btv: 8320, mht: 9250, pwm: 7200, npt: 2999, hpn: 6549, bdl: 9510, bwi: 10502, pit: 11500, ord: 13001, mdw: 6522, ind: 11200, lax: 12091, sfo: 11870, san: 9401, las: 14510, sea: 11901, dfw: 13401, aus: 12248, atl: 11890, pbi: 10008, mco: 12005, lhr: 12799, lgw: 10364, man: 10000, lcy: 4948, dub: 8652, snn: 10495, cdg: 13829, ory: 11975, mad: 14272, bcn: 11654, opo: 11417, lis: 12484, dxb: 13123, auh: 13451, dwc: 14764, jed: 12467, ruh: 13796, kwi: 11483, ebl: 13891, sda: 13123, tlv: 11998, amm: 12008, cai: 13120, jnb: 14495, cpt: 10502, dkr: 11450, cmn: 12205, rak: 10171, mem: 11120, dme: 12448, svo: 12139, aua: 8999, hav: 13123, hkg: 12467, pvg: 13123, pek: 14764, bkk: 13123, cgk: 12008, sin1: 13123, //CANNOT USE SIN... can: 12467, syd: 12999, mel: 11998, bne: 11680, per: 11299, akl: 11926, nrt: 13123, hnd: 9839, tas: 13123, rix: 8366, ham: 12028, osl: 11811, cph: 11811, hel: 11286, arn: 10830, kef: 10056 } //Uses user input to get relevant value from airport object function capable() { var input = document.getElementById("airport").value; var airportNumber = (airports[input]); alert(airportNumber) if (airportNumber >= 10200) { alert("YES") } else { alert("NO") } } 

 <form id="airportForm" action="form_action.asp"> Airport: <input id="airport" type="text" name="airport"> </form> <button onclick="capable()">Submit</button> 

Answer 2

You have several problems

1) You're not getting updated airport code on button click

2) input variable is the html control and the the airport code itself. You have to use ìnput.value

function capable() {
  var input = document.getElementById("input");
  var airportNumber = airports[input.value]; // get user airport code
    input.toLowerCase;
    alert(airportNumber)
    if (airportNumber >= 10200) {
        alert("YES")
    }
    else {
        alert("NO")
    }
}

BTW: there is no need to do a global loading of input as you do on the second line, I moved that logic to capable method