This replaces my earlier post (Html select menu).
I have been trying to fix the following for several weeks, with no success, and hope someone can help.
I have four html input boxes:
<input name="search-input" type="text" id="name" placeholder="taxon name" data-key="taxon" />
<input name="search-input" type="text" id="strain" placeholder="strain" data-key="strain" />
<input name="search-input" type="text" id="accession" placeholder="accession" data-key="accession" />
<input name="search-input" type="text" id="length" placeholder="length" data-key="length" />
an html select menu:
<label>
Please Choose a search criteria
<select class="length-dropdown">
<option value="exact value">exact value</option>
<option value="greater than">greater than</option>
<option value="less than">less than</option>
</select>
</label>
and an html table:
{ taxon: “Alice Johnson”, strain: “AB”, accession: “XY”, length: 370 },
{ taxon: “Bob Smith”, strain: “CD”, accession: “XY”, length: 350 },
{ taxon: “Carol Davis”, strain: “EF”, accession: “GH”, length: 470 },
{ taxon: “David Wilson”, strain: “AB”, accession: “IJ”, length: 460 },
{ taxon: “Eve Martinez”, strain: “GH”, accession: “KL”, length: 300 },
{ taxon: “Frank Brown”, strain: “IJ”, accession: “MN”, length: 360 },
selecting ‘less than’ in the select menu and ‘360’ in the length input box correctly returns the rows containing ‘350’ and ‘300’. However, data are not always available for some rows. If a length value is changed to “”, the row is still found (treated as less than 360); alphabetic characters like ‘n/a’ or ‘-’, or a blank value, prevent the table from loading.
I add here the code that deals with the select box:
function validateSize(sizeValue, userSize) {
if (userSize === 0) return true;
const searchCriteria = criteriaMenu.value;
switch (searchCriteria) {
case ("greater than"): {
return sizeValue > userSize;
}
case ("less than"): {
return sizeValue < userSize;
}
default: {
return sizeValue === userSize;
}
}
}
How can I work with missing data?