How to check if input is found in array?
0
I have this simple script that counts how many array elements matches my input but it seems like every if statement returns false.
I have checked that both (array element and input value) are Strings. Just can't figure out why it returns false.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<input type="text" id="searchType">
</div>
<p id="count"></p>
<script type="text/javascript">
var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
var n = 0;
for (var i = 0; i < bloodTypes.length; i++) {
if (bloodTypes[i] == document.getElementById("searchType").value){
n++;
}
}
document.getElementById("count").innerHTML = n;
</script>
</body>
</html>
javascript
asked Nov 25 '18 at 20:39
Jens AitolaJens Aitola
33
|
show 1 more comment
0
I have this simple script that counts how many array elements matches my input but it seems like every if statement returns false.
I have checked that both (array element and input value) are Strings. Just can't figure out why it returns false.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<input type="text" id="searchType">
</div>
<p id="count"></p>
<script type="text/javascript">
var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
var n = 0;
for (var i = 0; i < bloodTypes.length; i++) {
if (bloodTypes[i] == document.getElementById("searchType").value){
n++;
}
}
document.getElementById("count").innerHTML = n;
</script>
</body>
</html>
javascript
asked Nov 25 '18 at 20:39
Jens AitolaJens Aitola
33
1
We need to see your corresponding HTML as well. Also, you don't have this code inside of a function and therefore nothing is ever "returned" from it.
– Scott Marcus
Nov 25 '18 at 20:41
Not sure why you would expect more than one match in an array of unique values if using equality match. Provide a Minimal, Complete, and Verifiable example that includes input values yo u used
– charlietfl
Nov 25 '18 at 20:43
the for statement loops through every element and checks if that element is equal to the input value. And if it is then it increments the variable n by 1 and continues. So for example if my input value would be "AB+" then variable n should be 5 but it's 0
– Jens Aitola
Nov 25 '18 at 20:46
Yes, we can see that. But, please show us the corresponding HTML as well. And, let us know where you've placed yourscriptwithin the document.
– Scott Marcus
Nov 25 '18 at 20:46
1
It doesn't work for simple reason you only check when page loads before any user input
– charlietfl
Nov 25 '18 at 20:55
|
show 1 more comment
0
0
0
I have this simple script that counts how many array elements matches my input but it seems like every if statement returns false.
I have checked that both (array element and input value) are Strings. Just can't figure out why it returns false.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<input type="text" id="searchType">
</div>
<p id="count"></p>
<script type="text/javascript">
var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
var n = 0;
for (var i = 0; i < bloodTypes.length; i++) {
if (bloodTypes[i] == document.getElementById("searchType").value){
n++;
}
}
document.getElementById("count").innerHTML = n;
</script>
</body>
</html>
javascript
asked Nov 25 '18 at 20:39
Jens AitolaJens Aitola
33
I have this simple script that counts how many array elements matches my input but it seems like every if statement returns false.
I have checked that both (array element and input value) are Strings. Just can't figure out why it returns false.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<input type="text" id="searchType">
</div>
<p id="count"></p>
<script type="text/javascript">
var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
var n = 0;
for (var i = 0; i < bloodTypes.length; i++) {
if (bloodTypes[i] == document.getElementById("searchType").value){
n++;
}
}
document.getElementById("count").innerHTML = n;
</script>
</body>
</html>
javascript
javascript
asked Nov 25 '18 at 20:39
Jens AitolaJens Aitola
33
asked Nov 25 '18 at 20:39
Jens AitolaJens Aitola
33
edited Nov 25 '18 at 20:52
Jens Aitola
asked Nov 25 '18 at 20:39
Jens AitolaJens Aitola
33
asked Nov 25 '18 at 20:39
Jens AitolaJens Aitola
33
asked Nov 25 '18 at 20:39
Jens AitolaJens Aitola
33
33
1
We need to see your corresponding HTML as well. Also, you don't have this code inside of a function and therefore nothing is ever "returned" from it.
– Scott Marcus
Nov 25 '18 at 20:41
Not sure why you would expect more than one match in an array of unique values if using equality match. Provide a Minimal, Complete, and Verifiable example that includes input values yo u used
– charlietfl
Nov 25 '18 at 20:43
the for statement loops through every element and checks if that element is equal to the input value. And if it is then it increments the variable n by 1 and continues. So for example if my input value would be "AB+" then variable n should be 5 but it's 0
– Jens Aitola
Nov 25 '18 at 20:46
Yes, we can see that. But, please show us the corresponding HTML as well. And, let us know where you've placed yourscriptwithin the document.
– Scott Marcus
Nov 25 '18 at 20:46
1
It doesn't work for simple reason you only check when page loads before any user input
– charlietfl
Nov 25 '18 at 20:55
|
show 1 more comment
1
We need to see your corresponding HTML as well. Also, you don't have this code inside of a function and therefore nothing is ever "returned" from it.
– Scott Marcus
Nov 25 '18 at 20:41
Not sure why you would expect more than one match in an array of unique values if using equality match. Provide a Minimal, Complete, and Verifiable example that includes input values yo u used
– charlietfl
Nov 25 '18 at 20:43
the for statement loops through every element and checks if that element is equal to the input value. And if it is then it increments the variable n by 1 and continues. So for example if my input value would be "AB+" then variable n should be 5 but it's 0
– Jens Aitola
Nov 25 '18 at 20:46
Yes, we can see that. But, please show us the corresponding HTML as well. And, let us know where you've placed yourscriptwithin the document.
– Scott Marcus
Nov 25 '18 at 20:46
1
It doesn't work for simple reason you only check when page loads before any user input
– charlietfl
Nov 25 '18 at 20:55
1
1
We need to see your corresponding HTML as well. Also, you don't have this code inside of a function and therefore nothing is ever "returned" from it.
– Scott Marcus
Nov 25 '18 at 20:41
We need to see your corresponding HTML as well. Also, you don't have this code inside of a function and therefore nothing is ever "returned" from it.
– Scott Marcus
Nov 25 '18 at 20:41
Not sure why you would expect more than one match in an array of unique values if using equality match. Provide a Minimal, Complete, and Verifiable example that includes input values yo u used
– charlietfl
Nov 25 '18 at 20:43
Not sure why you would expect more than one match in an array of unique values if using equality match. Provide a Minimal, Complete, and Verifiable example that includes input values yo u used
– charlietfl
Nov 25 '18 at 20:43
the for statement loops through every element and checks if that element is equal to the input value. And if it is then it increments the variable n by 1 and continues. So for example if my input value would be "AB+" then variable n should be 5 but it's 0
– Jens Aitola
Nov 25 '18 at 20:46
the for statement loops through every element and checks if that element is equal to the input value. And if it is then it increments the variable n by 1 and continues. So for example if my input value would be "AB+" then variable n should be 5 but it's 0
– Jens Aitola
Nov 25 '18 at 20:46
Yes, we can see that. But, please show us the corresponding HTML as well. And, let us know where you've placed your
script within the document.– Scott Marcus
Nov 25 '18 at 20:46
Yes, we can see that. But, please show us the corresponding HTML as well. And, let us know where you've placed your
script within the document.– Scott Marcus
Nov 25 '18 at 20:46
1
1
It doesn't work for simple reason you only check when page loads before any user input
– charlietfl
Nov 25 '18 at 20:55
It doesn't work for simple reason you only check when page loads before any user input
– charlietfl
Nov 25 '18 at 20:55
|
show 1 more comment
3 Answers
3
active
oldest
votes
0
You have three issues.
- Your code is running immediately as soon as the page loads, which is
before the user has a chance to input a search string. - Your count code must be bound up into a callable unit of code (a function) so it
can be run as a unit at the right time. - You have to have a "trigger" (event) for the count code. In the example
below that's thechangeevent, which occurs after the value of the
input has changed and the focus on the control is lost (just hit TAB
after typing an input value).
See the comments inline below for more detail:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<input type="text" id="searchType">(hit TAB after entering data)
</div>
<p id="count"></p>
<script type="text/javascript">
// Your old code was testing for matches before the user had a chance to
// input anything. You need to set up an "event handler" that will call
// your code at the right time:
document.getElementById("searchType").addEventListener("change", count);
// You must gather up all this code into a function that can be called
// after there has been some search input
function count(){
var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
var n = 0;
for (var i = 0; i < bloodTypes.length; i++) {
if (bloodTypes[i] == document.getElementById("searchType").value){
n++;
}
}
// Only use .innerHTML when the string you are working with contains HTML
// that needs to be parsed. When it's not HTML, use .textContent.
document.getElementById("count").textContent = n;
}
</script>
</body>
</html>Now that we've got it working, this can be done in a simpler way using the Array.forEach() method and the JavaScript ternary operator.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<input type="text" id="searchType">(hit TAB after entering data)
</div>
<p id="count"></p>
<script>
// Get references to DOM elements just once:
let input = document.getElementById("searchType");
let output = document.getElementById("count");
input.addEventListener("change", count);
function count(){
var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
var n = 0;
bloodTypes.forEach(function(type) {
// Always call .trim on input strings. It strips off leading and
// trailing spaces that the user might have inadvertently added.
// The following uses the JavaScript "ternary" operator, which is a
// way to write a simple if/then/else statement. It works like this:
// condition ? true value : false value
n = (type == input.value.trim()) ? n + 1 : n;
});
output.textContent = n;
}
</script>
</body>
</html>answered Nov 25 '18 at 20:55
Scott MarcusScott Marcus
39.7k52040
Thanks for your help, I facepalmed myself when I saw your first point (running immediately) got the code working now. Shouldn't code when it's late at night. Thank you!
– Jens Aitola
Nov 25 '18 at 21:02
@JensAitola You're welcome. Take a look at my updated answer for a second, more streamlined approach.
– Scott Marcus
Nov 25 '18 at 21:06
1
That updated one looks much better I'm going with that one!
– Jens Aitola
Nov 25 '18 at 21:08
add a comment |
1
var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
var searchInput = document.getElementById("searchType");
var countElement = document.getElementById("count");
searchInput.addEventListener('input', function (e) {
var n = 0;
for (var i = 0; i < bloodTypes.length; i++) {
if (bloodTypes[i] == e.target.value) {
n++;
}
}
countElement.textContent = n;
});
answered Nov 25 '18 at 20:53
finicofinico
671612
ah, yeah. it should listen the event.
– Bhojendra Rauniyar
Nov 25 '18 at 20:54
add a comment |
0
You need to have that script run after the input text box has been filled out. For example, if you add a "search" button, and add a click handler for it, you could execute your code in the 'click' event listener for the search button.
If you run the code snippet below and enter AB+ into the box and then click the search button, you'll get 5, as expected:
<div>
<input type="text" id="searchType">
<button id="search">Search</button>
</div>
<p id="count"></p>
<script type="text/javascript">
document.getElementById('search').addEventListener('click', () => {
var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
var n = 0;
for (var i = 0; i < bloodTypes.length; i++) {
if (bloodTypes[i] == document.getElementById("searchType").value){
n++;
}
}
document.getElementById("count").innerHTML = n;
});
</script>answered Nov 25 '18 at 21:07
WyckWyck
1,64311624
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53471729%2fhow-to-check-if-input-is-found-in-array%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You have three issues.
- Your code is running immediately as soon as the page loads, which is
before the user has a chance to input a search string. - Your count code must be bound up into a callable unit of code (a function) so it
can be run as a unit at the right time. - You have to have a "trigger" (event) for the count code. In the example
below that's thechangeevent, which occurs after the value of the
input has changed and the focus on the control is lost (just hit TAB
after typing an input value).
See the comments inline below for more detail:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<input type="text" id="searchType">(hit TAB after entering data)
</div>
<p id="count"></p>
<script type="text/javascript">
// Your old code was testing for matches before the user had a chance to
// input anything. You need to set up an "event handler" that will call
// your code at the right time:
document.getElementById("searchType").addEventListener("change", count);
// You must gather up all this code into a function that can be called
// after there has been some search input
function count(){
var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
var n = 0;
for (var i = 0; i < bloodTypes.length; i++) {
if (bloodTypes[i] == document.getElementById("searchType").value){
n++;
}
}
// Only use .innerHTML when the string you are working with contains HTML
// that needs to be parsed. When it's not HTML, use .textContent.
document.getElementById("count").textContent = n;
}
</script>
</body>
</html>Now that we've got it working, this can be done in a simpler way using the Array.forEach() method and the JavaScript ternary operator.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<input type="text" id="searchType">(hit TAB after entering data)
</div>
<p id="count"></p>
<script>
// Get references to DOM elements just once:
let input = document.getElementById("searchType");
let output = document.getElementById("count");
input.addEventListener("change", count);
function count(){
var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
var n = 0;
bloodTypes.forEach(function(type) {
// Always call .trim on input strings. It strips off leading and
// trailing spaces that the user might have inadvertently added.
// The following uses the JavaScript "ternary" operator, which is a
// way to write a simple if/then/else statement. It works like this:
// condition ? true value : false value
n = (type == input.value.trim()) ? n + 1 : n;
});
output.textContent = n;
}
</script>
</body>
</html>answered Nov 25 '18 at 20:55
Scott MarcusScott Marcus
39.7k52040
Thanks for your help, I facepalmed myself when I saw your first point (running immediately) got the code working now. Shouldn't code when it's late at night. Thank you!
– Jens Aitola
Nov 25 '18 at 21:02
@JensAitola You're welcome. Take a look at my updated answer for a second, more streamlined approach.
– Scott Marcus
Nov 25 '18 at 21:06
1
That updated one looks much better I'm going with that one!
– Jens Aitola
Nov 25 '18 at 21:08
add a comment |
0
You have three issues.
- Your code is running immediately as soon as the page loads, which is
before the user has a chance to input a search string. - Your count code must be bound up into a callable unit of code (a function) so it
can be run as a unit at the right time. - You have to have a "trigger" (event) for the count code. In the example
below that's thechangeevent, which occurs after the value of the
input has changed and the focus on the control is lost (just hit TAB
after typing an input value).
See the comments inline below for more detail:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<input type="text" id="searchType">(hit TAB after entering data)
</div>
<p id="count"></p>
<script type="text/javascript">
// Your old code was testing for matches before the user had a chance to
// input anything. You need to set up an "event handler" that will call
// your code at the right time:
document.getElementById("searchType").addEventListener("change", count);
// You must gather up all this code into a function that can be called
// after there has been some search input
function count(){
var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
var n = 0;
for (var i = 0; i < bloodTypes.length; i++) {
if (bloodTypes[i] == document.getElementById("searchType").value){
n++;
}
}
// Only use .innerHTML when the string you are working with contains HTML
// that needs to be parsed. When it's not HTML, use .textContent.
document.getElementById("count").textContent = n;
}
</script>
</body>
</html>Now that we've got it working, this can be done in a simpler way using the Array.forEach() method and the JavaScript ternary operator.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<input type="text" id="searchType">(hit TAB after entering data)
</div>
<p id="count"></p>
<script>
// Get references to DOM elements just once:
let input = document.getElementById("searchType");
let output = document.getElementById("count");
input.addEventListener("change", count);
function count(){
var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
var n = 0;
bloodTypes.forEach(function(type) {
// Always call .trim on input strings. It strips off leading and
// trailing spaces that the user might have inadvertently added.
// The following uses the JavaScript "ternary" operator, which is a
// way to write a simple if/then/else statement. It works like this:
// condition ? true value : false value
n = (type == input.value.trim()) ? n + 1 : n;
});
output.textContent = n;
}
</script>
</body>
</html>answered Nov 25 '18 at 20:55
Scott MarcusScott Marcus
39.7k52040
Thanks for your help, I facepalmed myself when I saw your first point (running immediately) got the code working now. Shouldn't code when it's late at night. Thank you!
– Jens Aitola
Nov 25 '18 at 21:02
@JensAitola You're welcome. Take a look at my updated answer for a second, more streamlined approach.
– Scott Marcus
Nov 25 '18 at 21:06
1
That updated one looks much better I'm going with that one!
– Jens Aitola
Nov 25 '18 at 21:08
add a comment |
0
0
0
You have three issues.
- Your code is running immediately as soon as the page loads, which is
before the user has a chance to input a search string. - Your count code must be bound up into a callable unit of code (a function) so it
can be run as a unit at the right time. - You have to have a "trigger" (event) for the count code. In the example
below that's thechangeevent, which occurs after the value of the
input has changed and the focus on the control is lost (just hit TAB
after typing an input value).
See the comments inline below for more detail:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<input type="text" id="searchType">(hit TAB after entering data)
</div>
<p id="count"></p>
<script type="text/javascript">
// Your old code was testing for matches before the user had a chance to
// input anything. You need to set up an "event handler" that will call
// your code at the right time:
document.getElementById("searchType").addEventListener("change", count);
// You must gather up all this code into a function that can be called
// after there has been some search input
function count(){
var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
var n = 0;
for (var i = 0; i < bloodTypes.length; i++) {
if (bloodTypes[i] == document.getElementById("searchType").value){
n++;
}
}
// Only use .innerHTML when the string you are working with contains HTML
// that needs to be parsed. When it's not HTML, use .textContent.
document.getElementById("count").textContent = n;
}
</script>
</body>
</html>Now that we've got it working, this can be done in a simpler way using the Array.forEach() method and the JavaScript ternary operator.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<input type="text" id="searchType">(hit TAB after entering data)
</div>
<p id="count"></p>
<script>
// Get references to DOM elements just once:
let input = document.getElementById("searchType");
let output = document.getElementById("count");
input.addEventListener("change", count);
function count(){
var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
var n = 0;
bloodTypes.forEach(function(type) {
// Always call .trim on input strings. It strips off leading and
// trailing spaces that the user might have inadvertently added.
// The following uses the JavaScript "ternary" operator, which is a
// way to write a simple if/then/else statement. It works like this:
// condition ? true value : false value
n = (type == input.value.trim()) ? n + 1 : n;
});
output.textContent = n;
}
</script>
</body>
</html>answered Nov 25 '18 at 20:55
Scott MarcusScott Marcus
39.7k52040
You have three issues.
- Your code is running immediately as soon as the page loads, which is
before the user has a chance to input a search string. - Your count code must be bound up into a callable unit of code (a function) so it
can be run as a unit at the right time. - You have to have a "trigger" (event) for the count code. In the example
below that's thechangeevent, which occurs after the value of the
input has changed and the focus on the control is lost (just hit TAB
after typing an input value).
See the comments inline below for more detail:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<input type="text" id="searchType">(hit TAB after entering data)
</div>
<p id="count"></p>
<script type="text/javascript">
// Your old code was testing for matches before the user had a chance to
// input anything. You need to set up an "event handler" that will call
// your code at the right time:
document.getElementById("searchType").addEventListener("change", count);
// You must gather up all this code into a function that can be called
// after there has been some search input
function count(){
var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
var n = 0;
for (var i = 0; i < bloodTypes.length; i++) {
if (bloodTypes[i] == document.getElementById("searchType").value){
n++;
}
}
// Only use .innerHTML when the string you are working with contains HTML
// that needs to be parsed. When it's not HTML, use .textContent.
document.getElementById("count").textContent = n;
}
</script>
</body>
</html>Now that we've got it working, this can be done in a simpler way using the Array.forEach() method and the JavaScript ternary operator.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<input type="text" id="searchType">(hit TAB after entering data)
</div>
<p id="count"></p>
<script>
// Get references to DOM elements just once:
let input = document.getElementById("searchType");
let output = document.getElementById("count");
input.addEventListener("change", count);
function count(){
var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
var n = 0;
bloodTypes.forEach(function(type) {
// Always call .trim on input strings. It strips off leading and
// trailing spaces that the user might have inadvertently added.
// The following uses the JavaScript "ternary" operator, which is a
// way to write a simple if/then/else statement. It works like this:
// condition ? true value : false value
n = (type == input.value.trim()) ? n + 1 : n;
});
output.textContent = n;
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<input type="text" id="searchType">(hit TAB after entering data)
</div>
<p id="count"></p>
<script type="text/javascript">
// Your old code was testing for matches before the user had a chance to
// input anything. You need to set up an "event handler" that will call
// your code at the right time:
document.getElementById("searchType").addEventListener("change", count);
// You must gather up all this code into a function that can be called
// after there has been some search input
function count(){
var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
var n = 0;
for (var i = 0; i < bloodTypes.length; i++) {
if (bloodTypes[i] == document.getElementById("searchType").value){
n++;
}
}
// Only use .innerHTML when the string you are working with contains HTML
// that needs to be parsed. When it's not HTML, use .textContent.
document.getElementById("count").textContent = n;
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<input type="text" id="searchType">(hit TAB after entering data)
</div>
<p id="count"></p>
<script type="text/javascript">
// Your old code was testing for matches before the user had a chance to
// input anything. You need to set up an "event handler" that will call
// your code at the right time:
document.getElementById("searchType").addEventListener("change", count);
// You must gather up all this code into a function that can be called
// after there has been some search input
function count(){
var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
var n = 0;
for (var i = 0; i < bloodTypes.length; i++) {
if (bloodTypes[i] == document.getElementById("searchType").value){
n++;
}
}
// Only use .innerHTML when the string you are working with contains HTML
// that needs to be parsed. When it's not HTML, use .textContent.
document.getElementById("count").textContent = n;
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<input type="text" id="searchType">(hit TAB after entering data)
</div>
<p id="count"></p>
<script>
// Get references to DOM elements just once:
let input = document.getElementById("searchType");
let output = document.getElementById("count");
input.addEventListener("change", count);
function count(){
var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
var n = 0;
bloodTypes.forEach(function(type) {
// Always call .trim on input strings. It strips off leading and
// trailing spaces that the user might have inadvertently added.
// The following uses the JavaScript "ternary" operator, which is a
// way to write a simple if/then/else statement. It works like this:
// condition ? true value : false value
n = (type == input.value.trim()) ? n + 1 : n;
});
output.textContent = n;
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<input type="text" id="searchType">(hit TAB after entering data)
</div>
<p id="count"></p>
<script>
// Get references to DOM elements just once:
let input = document.getElementById("searchType");
let output = document.getElementById("count");
input.addEventListener("change", count);
function count(){
var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
var n = 0;
bloodTypes.forEach(function(type) {
// Always call .trim on input strings. It strips off leading and
// trailing spaces that the user might have inadvertently added.
// The following uses the JavaScript "ternary" operator, which is a
// way to write a simple if/then/else statement. It works like this:
// condition ? true value : false value
n = (type == input.value.trim()) ? n + 1 : n;
});
output.textContent = n;
}
</script>
</body>
</html>answered Nov 25 '18 at 20:55
Scott MarcusScott Marcus
39.7k52040
edited Nov 25 '18 at 21:09
answered Nov 25 '18 at 20:55
Scott MarcusScott Marcus
39.7k52040
answered Nov 25 '18 at 20:55
Scott MarcusScott Marcus
39.7k52040
answered Nov 25 '18 at 20:55
Scott MarcusScott Marcus
39.7k52040
39.7k52040
Thanks for your help, I facepalmed myself when I saw your first point (running immediately) got the code working now. Shouldn't code when it's late at night. Thank you!
– Jens Aitola
Nov 25 '18 at 21:02
@JensAitola You're welcome. Take a look at my updated answer for a second, more streamlined approach.
– Scott Marcus
Nov 25 '18 at 21:06
1
That updated one looks much better I'm going with that one!
– Jens Aitola
Nov 25 '18 at 21:08
add a comment |
Thanks for your help, I facepalmed myself when I saw your first point (running immediately) got the code working now. Shouldn't code when it's late at night. Thank you!
– Jens Aitola
Nov 25 '18 at 21:02
@JensAitola You're welcome. Take a look at my updated answer for a second, more streamlined approach.
– Scott Marcus
Nov 25 '18 at 21:06
1
That updated one looks much better I'm going with that one!
– Jens Aitola
Nov 25 '18 at 21:08
Thanks for your help, I facepalmed myself when I saw your first point (running immediately) got the code working now. Shouldn't code when it's late at night. Thank you!
– Jens Aitola
Nov 25 '18 at 21:02
Thanks for your help, I facepalmed myself when I saw your first point (running immediately) got the code working now. Shouldn't code when it's late at night. Thank you!
– Jens Aitola
Nov 25 '18 at 21:02
@JensAitola You're welcome. Take a look at my updated answer for a second, more streamlined approach.
– Scott Marcus
Nov 25 '18 at 21:06
@JensAitola You're welcome. Take a look at my updated answer for a second, more streamlined approach.
– Scott Marcus
Nov 25 '18 at 21:06
1
1
That updated one looks much better I'm going with that one!
– Jens Aitola
Nov 25 '18 at 21:08
That updated one looks much better I'm going with that one!
– Jens Aitola
Nov 25 '18 at 21:08
add a comment |
1
var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
var searchInput = document.getElementById("searchType");
var countElement = document.getElementById("count");
searchInput.addEventListener('input', function (e) {
var n = 0;
for (var i = 0; i < bloodTypes.length; i++) {
if (bloodTypes[i] == e.target.value) {
n++;
}
}
countElement.textContent = n;
});
answered Nov 25 '18 at 20:53
finicofinico
671612
ah, yeah. it should listen the event.
– Bhojendra Rauniyar
Nov 25 '18 at 20:54
add a comment |
1
var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
var searchInput = document.getElementById("searchType");
var countElement = document.getElementById("count");
searchInput.addEventListener('input', function (e) {
var n = 0;
for (var i = 0; i < bloodTypes.length; i++) {
if (bloodTypes[i] == e.target.value) {
n++;
}
}
countElement.textContent = n;
});
answered Nov 25 '18 at 20:53
finicofinico
671612
ah, yeah. it should listen the event.
– Bhojendra Rauniyar
Nov 25 '18 at 20:54
add a comment |
1
1
1
var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
var searchInput = document.getElementById("searchType");
var countElement = document.getElementById("count");
searchInput.addEventListener('input', function (e) {
var n = 0;
for (var i = 0; i < bloodTypes.length; i++) {
if (bloodTypes[i] == e.target.value) {
n++;
}
}
countElement.textContent = n;
});
answered Nov 25 '18 at 20:53
finicofinico
671612
var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
var searchInput = document.getElementById("searchType");
var countElement = document.getElementById("count");
searchInput.addEventListener('input', function (e) {
var n = 0;
for (var i = 0; i < bloodTypes.length; i++) {
if (bloodTypes[i] == e.target.value) {
n++;
}
}
countElement.textContent = n;
});
answered Nov 25 '18 at 20:53
finicofinico
671612
answered Nov 25 '18 at 20:53
finicofinico
671612
answered Nov 25 '18 at 20:53
finicofinico
671612
answered Nov 25 '18 at 20:53
finicofinico
671612
671612
ah, yeah. it should listen the event.
– Bhojendra Rauniyar
Nov 25 '18 at 20:54
add a comment |
ah, yeah. it should listen the event.
– Bhojendra Rauniyar
Nov 25 '18 at 20:54
ah, yeah. it should listen the event.
– Bhojendra Rauniyar
Nov 25 '18 at 20:54
ah, yeah. it should listen the event.
– Bhojendra Rauniyar
Nov 25 '18 at 20:54
add a comment |
0
You need to have that script run after the input text box has been filled out. For example, if you add a "search" button, and add a click handler for it, you could execute your code in the 'click' event listener for the search button.
If you run the code snippet below and enter AB+ into the box and then click the search button, you'll get 5, as expected:
<div>
<input type="text" id="searchType">
<button id="search">Search</button>
</div>
<p id="count"></p>
<script type="text/javascript">
document.getElementById('search').addEventListener('click', () => {
var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
var n = 0;
for (var i = 0; i < bloodTypes.length; i++) {
if (bloodTypes[i] == document.getElementById("searchType").value){
n++;
}
}
document.getElementById("count").innerHTML = n;
});
</script>answered Nov 25 '18 at 21:07
WyckWyck
1,64311624
add a comment |
0
You need to have that script run after the input text box has been filled out. For example, if you add a "search" button, and add a click handler for it, you could execute your code in the 'click' event listener for the search button.
If you run the code snippet below and enter AB+ into the box and then click the search button, you'll get 5, as expected:
<div>
<input type="text" id="searchType">
<button id="search">Search</button>
</div>
<p id="count"></p>
<script type="text/javascript">
document.getElementById('search').addEventListener('click', () => {
var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
var n = 0;
for (var i = 0; i < bloodTypes.length; i++) {
if (bloodTypes[i] == document.getElementById("searchType").value){
n++;
}
}
document.getElementById("count").innerHTML = n;
});
</script>answered Nov 25 '18 at 21:07
WyckWyck
1,64311624
add a comment |
0
0
0
You need to have that script run after the input text box has been filled out. For example, if you add a "search" button, and add a click handler for it, you could execute your code in the 'click' event listener for the search button.
If you run the code snippet below and enter AB+ into the box and then click the search button, you'll get 5, as expected:
<div>
<input type="text" id="searchType">
<button id="search">Search</button>
</div>
<p id="count"></p>
<script type="text/javascript">
document.getElementById('search').addEventListener('click', () => {
var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
var n = 0;
for (var i = 0; i < bloodTypes.length; i++) {
if (bloodTypes[i] == document.getElementById("searchType").value){
n++;
}
}
document.getElementById("count").innerHTML = n;
});
</script>answered Nov 25 '18 at 21:07
WyckWyck
1,64311624
You need to have that script run after the input text box has been filled out. For example, if you add a "search" button, and add a click handler for it, you could execute your code in the 'click' event listener for the search button.
If you run the code snippet below and enter AB+ into the box and then click the search button, you'll get 5, as expected:
<div>
<input type="text" id="searchType">
<button id="search">Search</button>
</div>
<p id="count"></p>
<script type="text/javascript">
document.getElementById('search').addEventListener('click', () => {
var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
var n = 0;
for (var i = 0; i < bloodTypes.length; i++) {
if (bloodTypes[i] == document.getElementById("searchType").value){
n++;
}
}
document.getElementById("count").innerHTML = n;
});
</script><div>
<input type="text" id="searchType">
<button id="search">Search</button>
</div>
<p id="count"></p>
<script type="text/javascript">
document.getElementById('search').addEventListener('click', () => {
var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
var n = 0;
for (var i = 0; i < bloodTypes.length; i++) {
if (bloodTypes[i] == document.getElementById("searchType").value){
n++;
}
}
document.getElementById("count").innerHTML = n;
});
</script><div>
<input type="text" id="searchType">
<button id="search">Search</button>
</div>
<p id="count"></p>
<script type="text/javascript">
document.getElementById('search').addEventListener('click', () => {
var bloodTypes = ["A+", "O-", "AB+", "O+", "AB+", "AB+", "O-", "AB+", "0+", "AB+"];
var n = 0;
for (var i = 0; i < bloodTypes.length; i++) {
if (bloodTypes[i] == document.getElementById("searchType").value){
n++;
}
}
document.getElementById("count").innerHTML = n;
});
</script>answered Nov 25 '18 at 21:07
WyckWyck
1,64311624
answered Nov 25 '18 at 21:07
WyckWyck
1,64311624
answered Nov 25 '18 at 21:07
WyckWyck
1,64311624
answered Nov 25 '18 at 21:07
WyckWyck
1,64311624
1,64311624
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53471729%2fhow-to-check-if-input-is-found-in-array%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
We need to see your corresponding HTML as well. Also, you don't have this code inside of a function and therefore nothing is ever "returned" from it.
– Scott Marcus
Nov 25 '18 at 20:41
Not sure why you would expect more than one match in an array of unique values if using equality match. Provide a Minimal, Complete, and Verifiable example that includes input values yo u used
– charlietfl
Nov 25 '18 at 20:43
the for statement loops through every element and checks if that element is equal to the input value. And if it is then it increments the variable n by 1 and continues. So for example if my input value would be "AB+" then variable n should be 5 but it's 0
– Jens Aitola
Nov 25 '18 at 20:46
Yes, we can see that. But, please show us the corresponding HTML as well. And, let us know where you've placed your
scriptwithin the document.– Scott Marcus
Nov 25 '18 at 20:46
1
It doesn't work for simple reason you only check when page loads before any user input
– charlietfl
Nov 25 '18 at 20:55