En el fragmento a continuación, si ingreso un valor en el cuadro de texto, se supone que debe devolver algo. es decir; ingresar 'PA' devuelve 'Pennsylvania'. Pero si ingreso 'AZ', devuelve mi declaración else.
¿Cómo cambio esto para que verifique el valor con cualquier valor ingresado y muestre el resultado correctamente?
const states = [ { abbreviated: 'AZ', state: 'Arizona' }, { abbreviated: 'PA', state: 'Pennsylvania' } ]; function searchState() { let txt = searchTxt.value; for (var i = 0; i < states.length; i++) { var abbreviatedState = states[i]; if (txt == abbreviatedState.abbreviated) { output.textContent = abbreviatedState.state; } else { output.textContent = 'Uh, oh! We don\'t know that one!'; } } } document.querySelector('.search').addEventListener("click", ()=>searchState()); <input name="searchTxt" type="text" id="searchTxt" class="searchField" placeholder="State Abbreviation?"/> <button class="search">Search</button> <h4>State Of: <span id="output"></span></h4>Ejecute el bucle hasta el final y solo asigne Uh oh si no se encuentra nada. Para facilitar la lógica, use .find en lugar de un bucle for.
const states = [ { abbreviated: 'AZ', state: 'Arizona' }, { abbreviated: 'PA', state: 'Pennsylvania' } ]; function searchState() { const txt = searchTxt.value; const foundState = states.find(state => state.abbreviated === txt); output.textContent = foundState ? foundState.state : 'Uh, oh! We don\'t know that one!' } document.querySelector('.search').addEventListener("click", ()=>searchState()); <input name="searchTxt" type="text" id="searchTxt" class="searchField" placeholder="State Abbreviation?"/> <button class="search">Search</button> <h4>State Of: <span id="output"></span></h4>Su código entra en el bloque else incluso si entra en if una vez. He refactorizado el código para establecer "uh oh" como el valor predeterminado, solo busca if y break una vez encontrado.
const states = [{ abbreviated: 'AZ', state: 'Arizona' }, { abbreviated: 'PA', state: 'Pennsylvania' }]; function searchState() { let txt = searchTxt.value; output.textContent = 'Uh, oh! We don\'t know that one!'; for (var i = 0; i < states.length; i++) { var abbreviatedState = states[i]; if (txt == abbreviatedState.abbreviated) { output.textContent = abbreviatedState.state; break; } } } document.querySelector('.search').addEventListener("click", () => searchState()); <input name="searchTxt" type="text" id="searchTxt" class="searchField" placeholder="State Abbreviation?" /> <button class="search">Search</button> <h4>State Of: <span id="output"></span></h4>Porque continúa buscando el evento después de que se encuentra el estado AZ y pasa a else tarde.
const states = [{ abbreviated: 'AZ', state: 'Arizona' }, { abbreviated: 'PA', state: 'Pennsylvania' }]; function searchState() { let txt = searchTxt.value; console.log(txt); const output = document.querySelector('#output'); for (var i = 0; i < states.length; i++) { var abbreviatedState = states[i]; if (txt == abbreviatedState.abbreviated) { output.textContent = abbreviatedState.state; break; } else { output.textContent = 'Uh, oh! We don\'t know that one!'; } } } document.querySelector('.search').addEventListener("click", () => searchState()); <input name="searchTxt" type="text" id="searchTxt" class="searchField" placeholder="State Abbreviation?" /> <button class="search">Search</button> <h4>State Of: <span id="output"></span></h4>