I'm not a professional coder, and I have an issue that might have a very simple fix.
So here is my code so far. It is very basic. I'm trying to get the code from the html input, and use that to carry out the javascript. For example, if a person types "Hydrogen" into the input, I want it to take them to a hydrogen page, but if they type in "helium", I want to take them to the helium page. Here's the code that I have written, but everytime I try it, no matter what I type, it takes me to the helium page. Can anyone please help me fix this issue. Thank you
<body>
<input id="search" placeholder="Search for an element">
<button>Search</button>
</body>
<script type="text/javascript">
document.querySelector("button").addEventListener("click", function() {
if (document.getElementById('search').value === 'Hydrogen'||'H'||'1') {
window.location.href='./elements/hydrogen.html'
}
if (document.getElementById('search').value === 'Helium'||'He'||'2'){
window.location.href='./elements/helium.html'
}
})
</script>
Because any non-empty string is truthy in JavaScript. So conditions like this will always be true:
document.getElementById('search').value === 'Hydrogen'||'H'||'1'
Because 'H', being a non-empty string, is interpreted as "true".
Programming languages are not natural human languages relying on human intuition. Everything in a programming language must be explicitly defined using unambiguous logic. So your conditions would instead be:
document.getElementById('search').value === 'Hydrogen' ||
document.getElementById('search').value === 'H' ||
document.getElementById('search').value === '1'
That is, each condition is tested fully and independently, and the results are tested against the logical || operators.
You can of course shorten this in a variety of ways. For example:
['Hydrogen', 'H', '1'].includes(document.getElementById('search').value)
this way
const
button = document.querySelector('button')
, search = document.getElementById('search')
;
button.onclick = e =>
{
if (['Hydrogen','H','1'].includes( search.value ))
window.location.href='./elements/hydrogen.html'
if (['Helium','He','2'].includes( search.value ))
window.location.href='./elements/helium.html'
} <input id="search" placeholder="Search for an element">
<button>Search</button>