In the snippet below, if I enter a value in the textbox, it's supposed to return something. i.e.; entering 'PA' returns 'Pennsylvania'. But if I enter 'AZ', it returns my else statement.
How do I change this so that it checks the value against any value entered and displays the result properly?
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>Run the loop to the end, and only assign Uh oh if nothing is found. To make the logic easier, use .find instead of a for loop.
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>Your code goes into the else block even if it goes into if once. I've refactored the code to set "uh oh" as the default value, only searches for if and breaks out once found.
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>Because you continue searching event after AZ state is found and it goes into else later.
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>