Trying to detect if any checked values contains a specific stringHow to check empty/undefined/null string in...
Is there any good browser plugin or tool to quickly identify any security issues of a web site?
Do we still track damage on indestructible creatures?
Is it really OK to use "because of"?
Does rolling friction increase speed of a wheel?
Why write a book when there's a movie in my head?
What can I do to encourage my players to use their consumables?
How can I prevent an oracle who can see into the past from knowing everything that has happened?
Taking an academic pseudonym?
Modern Algebraic Geometry and Analytic Number Theory
Is it recommended to be 100% delegated for a baker?
Is the UK legally prevented from having another referendum on Brexit?
How to know if I am a 'Real Developer'
Why is Shelob considered evil?
Crack the bank account's password!
Why did Ylvis use "go" instead of "say" in phrases like "Dog goes 'woof'"?
"I showed the monkey himself in the mirror". Why is this sentence grammatical?
How do I narratively explain how in-game circumstances do not mechanically allow a PC to instantly kill an NPC?
Was Opportunity's last message to Earth "My battery is low and it's getting dark"?
Given a total recursive function, can you always compute its fixed-point?
Is practicing on a digital piano harmful to an experienced piano player?
Minimum Viable Product for RTS game?
How can I deduce the power of a capacitor from its datasheet?
Is there a way to pause a running process on Linux systems and resume later?
Can you say "leftside right"?
Trying to detect if any checked values contains a specific string
How to check empty/undefined/null string in JavaScript?How to check if a string “StartsWith” another string?How can I get query string values in JavaScript?Sort array of objects by string property valueDetermine whether an array contains a valueHow to check whether a string contains a substring in JavaScript?How do I check if string contains substring?Check if a variable is a string in JavaScriptWhat's the proper value for a checked attribute of an HTML checkbox?Cannot display HTML string
I'm trying to grab the values of all checked input options from a series of checkboxes and find if any of the checked values matches a specific string:
function admissible() {
var b = 4;
var answer = '';
var elementsList = document.querySelectorAll("#question5" + " input:checked");
//get the selected checkbox values for the missing elements
if (elementsList.length >= 0) { //Code works only if some checkbox is checked
if ((elementsList.indexOf("photo") > -1) || (elementsList.indexOf("name") > -1)) { //yes
answer = 'yes';
} else {
answer = 'no';
}
} else {
//display error: you must select a value
}
console.log(answer);
}
<div class="questionholder" id="question5">
<div>
<h5>Select all elements</h5>
<input class="input5" type="checkbox" id="elementName" name="element" value="name"><label for="elementName"><p class="radioChoice">Name</p></label>
<input class="input5" type="checkbox" id="elementPhoto" name="element" value="photo"><label for="elementPhoto"><p class="radioChoice">Photo</p></label>
<input class="input5" type="checkbox" id="elementSignature" name="element" value="signature"><label for="elementSignature"><p class="radioChoice">Signature</p></label>
</div>
<div class="holdButtons">
<a class="text2button" onclick="admissible()">Next</a>
</div>
</div>
elementsList doesn't seem to be storing the values of the checked boxes. How do I resolve this?
JSFiddle
javascript html
|
show 1 more comment
I'm trying to grab the values of all checked input options from a series of checkboxes and find if any of the checked values matches a specific string:
function admissible() {
var b = 4;
var answer = '';
var elementsList = document.querySelectorAll("#question5" + " input:checked");
//get the selected checkbox values for the missing elements
if (elementsList.length >= 0) { //Code works only if some checkbox is checked
if ((elementsList.indexOf("photo") > -1) || (elementsList.indexOf("name") > -1)) { //yes
answer = 'yes';
} else {
answer = 'no';
}
} else {
//display error: you must select a value
}
console.log(answer);
}
<div class="questionholder" id="question5">
<div>
<h5>Select all elements</h5>
<input class="input5" type="checkbox" id="elementName" name="element" value="name"><label for="elementName"><p class="radioChoice">Name</p></label>
<input class="input5" type="checkbox" id="elementPhoto" name="element" value="photo"><label for="elementPhoto"><p class="radioChoice">Photo</p></label>
<input class="input5" type="checkbox" id="elementSignature" name="element" value="signature"><label for="elementSignature"><p class="radioChoice">Signature</p></label>
</div>
<div class="holdButtons">
<a class="text2button" onclick="admissible()">Next</a>
</div>
</div>
elementsList doesn't seem to be storing the values of the checked boxes. How do I resolve this?
JSFiddle
javascript html
4
It's.indexOf()
not.indexOF()
– Andreas
2 hours ago
That is a typoindexOF()
suppose to beindexOf()
.
– Cocest
1 hour ago
fixed thet ypo but it still own't store the values
– Sweepster
1 hour ago
Try thisconsole.log(elementsList);
. What is the result?
– Cocest
1 hour ago
it says elementsList.indexOf is not a function
– Sweepster
1 hour ago
|
show 1 more comment
I'm trying to grab the values of all checked input options from a series of checkboxes and find if any of the checked values matches a specific string:
function admissible() {
var b = 4;
var answer = '';
var elementsList = document.querySelectorAll("#question5" + " input:checked");
//get the selected checkbox values for the missing elements
if (elementsList.length >= 0) { //Code works only if some checkbox is checked
if ((elementsList.indexOf("photo") > -1) || (elementsList.indexOf("name") > -1)) { //yes
answer = 'yes';
} else {
answer = 'no';
}
} else {
//display error: you must select a value
}
console.log(answer);
}
<div class="questionholder" id="question5">
<div>
<h5>Select all elements</h5>
<input class="input5" type="checkbox" id="elementName" name="element" value="name"><label for="elementName"><p class="radioChoice">Name</p></label>
<input class="input5" type="checkbox" id="elementPhoto" name="element" value="photo"><label for="elementPhoto"><p class="radioChoice">Photo</p></label>
<input class="input5" type="checkbox" id="elementSignature" name="element" value="signature"><label for="elementSignature"><p class="radioChoice">Signature</p></label>
</div>
<div class="holdButtons">
<a class="text2button" onclick="admissible()">Next</a>
</div>
</div>
elementsList doesn't seem to be storing the values of the checked boxes. How do I resolve this?
JSFiddle
javascript html
I'm trying to grab the values of all checked input options from a series of checkboxes and find if any of the checked values matches a specific string:
function admissible() {
var b = 4;
var answer = '';
var elementsList = document.querySelectorAll("#question5" + " input:checked");
//get the selected checkbox values for the missing elements
if (elementsList.length >= 0) { //Code works only if some checkbox is checked
if ((elementsList.indexOf("photo") > -1) || (elementsList.indexOf("name") > -1)) { //yes
answer = 'yes';
} else {
answer = 'no';
}
} else {
//display error: you must select a value
}
console.log(answer);
}
<div class="questionholder" id="question5">
<div>
<h5>Select all elements</h5>
<input class="input5" type="checkbox" id="elementName" name="element" value="name"><label for="elementName"><p class="radioChoice">Name</p></label>
<input class="input5" type="checkbox" id="elementPhoto" name="element" value="photo"><label for="elementPhoto"><p class="radioChoice">Photo</p></label>
<input class="input5" type="checkbox" id="elementSignature" name="element" value="signature"><label for="elementSignature"><p class="radioChoice">Signature</p></label>
</div>
<div class="holdButtons">
<a class="text2button" onclick="admissible()">Next</a>
</div>
</div>
elementsList doesn't seem to be storing the values of the checked boxes. How do I resolve this?
JSFiddle
function admissible() {
var b = 4;
var answer = '';
var elementsList = document.querySelectorAll("#question5" + " input:checked");
//get the selected checkbox values for the missing elements
if (elementsList.length >= 0) { //Code works only if some checkbox is checked
if ((elementsList.indexOf("photo") > -1) || (elementsList.indexOf("name") > -1)) { //yes
answer = 'yes';
} else {
answer = 'no';
}
} else {
//display error: you must select a value
}
console.log(answer);
}
<div class="questionholder" id="question5">
<div>
<h5>Select all elements</h5>
<input class="input5" type="checkbox" id="elementName" name="element" value="name"><label for="elementName"><p class="radioChoice">Name</p></label>
<input class="input5" type="checkbox" id="elementPhoto" name="element" value="photo"><label for="elementPhoto"><p class="radioChoice">Photo</p></label>
<input class="input5" type="checkbox" id="elementSignature" name="element" value="signature"><label for="elementSignature"><p class="radioChoice">Signature</p></label>
</div>
<div class="holdButtons">
<a class="text2button" onclick="admissible()">Next</a>
</div>
</div>
function admissible() {
var b = 4;
var answer = '';
var elementsList = document.querySelectorAll("#question5" + " input:checked");
//get the selected checkbox values for the missing elements
if (elementsList.length >= 0) { //Code works only if some checkbox is checked
if ((elementsList.indexOf("photo") > -1) || (elementsList.indexOf("name") > -1)) { //yes
answer = 'yes';
} else {
answer = 'no';
}
} else {
//display error: you must select a value
}
console.log(answer);
}
<div class="questionholder" id="question5">
<div>
<h5>Select all elements</h5>
<input class="input5" type="checkbox" id="elementName" name="element" value="name"><label for="elementName"><p class="radioChoice">Name</p></label>
<input class="input5" type="checkbox" id="elementPhoto" name="element" value="photo"><label for="elementPhoto"><p class="radioChoice">Photo</p></label>
<input class="input5" type="checkbox" id="elementSignature" name="element" value="signature"><label for="elementSignature"><p class="radioChoice">Signature</p></label>
</div>
<div class="holdButtons">
<a class="text2button" onclick="admissible()">Next</a>
</div>
</div>
javascript html
javascript html
edited 1 hour ago
Sweepster
asked 2 hours ago
SweepsterSweepster
68231650
68231650
4
It's.indexOf()
not.indexOF()
– Andreas
2 hours ago
That is a typoindexOF()
suppose to beindexOf()
.
– Cocest
1 hour ago
fixed thet ypo but it still own't store the values
– Sweepster
1 hour ago
Try thisconsole.log(elementsList);
. What is the result?
– Cocest
1 hour ago
it says elementsList.indexOf is not a function
– Sweepster
1 hour ago
|
show 1 more comment
4
It's.indexOf()
not.indexOF()
– Andreas
2 hours ago
That is a typoindexOF()
suppose to beindexOf()
.
– Cocest
1 hour ago
fixed thet ypo but it still own't store the values
– Sweepster
1 hour ago
Try thisconsole.log(elementsList);
. What is the result?
– Cocest
1 hour ago
it says elementsList.indexOf is not a function
– Sweepster
1 hour ago
4
4
It's
.indexOf()
not .indexOF()
– Andreas
2 hours ago
It's
.indexOf()
not .indexOF()
– Andreas
2 hours ago
That is a typo
indexOF()
suppose to be indexOf()
.– Cocest
1 hour ago
That is a typo
indexOF()
suppose to be indexOf()
.– Cocest
1 hour ago
fixed thet ypo but it still own't store the values
– Sweepster
1 hour ago
fixed thet ypo but it still own't store the values
– Sweepster
1 hour ago
Try this
console.log(elementsList);
. What is the result?– Cocest
1 hour ago
Try this
console.log(elementsList);
. What is the result?– Cocest
1 hour ago
it says elementsList.indexOf is not a function
– Sweepster
1 hour ago
it says elementsList.indexOf is not a function
– Sweepster
1 hour ago
|
show 1 more comment
4 Answers
4
active
oldest
votes
There were multiple errors in this code. I also changed a bit to make it simpler.
- You have to use
.indexOf()
not.indexOF()
. That's probably
what's throwing your code off. - For
document.querySelectorAll
, you only needinput:checked
.querySelectorAll
returns a NodeList which is more like an object than an array. Therefore,.indexOf()
does not work on it. You must loop through it to find the value.- I set the default value of
answer
to"no"
, and if it finds photo or name, it will set the value to"yes"
.
The snippet below works for you.
function admissible() {
var b = 4;
var answer = 'no';
var elementsList = document.querySelectorAll("input:checked");
//get the selected checkbox values for the missing elements
if (elementsList.length >= 0) { //Code works only if some checkbox is checked
for (var i = 0; i < elementsList.length; i++) {
if (elementsList[i].value == "photo" || elementsList[i].value == "name") {
answer = "yes";
}
}
} else {
//display error: you must select a value
}
console.log(answer);
}
<div class="questionholder" id="question5">
<div>
<h5>Select all elements</h5>
<input class="input5" type="checkbox" id="elementName" name="element" value="name"><label for="elementName"><p class="radioChoice">Name</p></label>
<input class="input5" type="checkbox" id="elementPhoto" name="element" value="photo"><label for="elementPhoto"><p class="radioChoice">Photo</p></label>
<input class="input5" type="checkbox" id="elementSignature" name="element" value="signature"><label for="elementSignature"><p class="radioChoice">Signature</p></label>
</div>
<div class="holdButtons">
<a class="text2button" onclick="admissible()">Next</a>
</div>
</div>
fixed the typo, but the code isn't executing... it's not storing any of the selected checkbox values
– Sweepster
1 hour ago
I'm working on it. The problem iselementsList
is not an array, but an object. So indexof won't work on it anyways. I'm working on a solution atm
– Aniket G
1 hour ago
@Sweepster updated my answer above to work for you.
– Aniket G
1 hour ago
add a comment |
There are a lot of errors in your posted code. The code in the example below fixes them. The comments explain how it is solved.
Small summary:
Query selector
"#question5" + " input:checked"
That query selector was wrong. The checked part will select inputs that have been checked, but your node list will not contain any entries. Combining it into
"#question5 > div:first-child > input:checked"
will tell document.querySelectorAll
to select all elements of type input that are checked within the first div child element of the element with id question5
.
Iterating over a node list
Since document.querySelectorAll
returns a nodelist
(array like) which is not actually an array. In your code you used length
check to <= 0
. This will always execute the if. Drop the =
. Now the if only fires when the nodelist
has at least one entry.
Then we cast the nodeList
to an array using Array.from
and loop over it with Array.prototype.some
. Which iterates over every element and if one condition matches it will return true.
We use String.prototype.search
instead of String.prototype.indexOf
since we can use a regexp to look for the value name|photo
in one go. The |
(pipe) tells the code to either look for name
or photo
. If the result is not -1
we found the value.
Working example
function admissible(method) {
var b = 4;
var answer = '';
var elementsList = document.querySelectorAll("#question5 > div:first-child > input:checked"); //fixed the query selector
//get the selected checkbox values for the missing elements
if (elementsList.length > 0) { //Code works only if some checkbox is checked
//cast the node list to array and use array.some to iterate over entries. If one value is found answerFilter will be true.
if (method == "some") {
var answerFilter = Array.from(elementsList).some(function(element) {
return element.value.search(/name|photo/i) != -1; //check with regexp if value contains photo or name
});
}
else
{
//map returns an array and lets us return a value we want.
var answerFilter = Array.from(elementsList).map(function(element) {
return element.value;
});
//now use indexOf like in the original code
if (answerFilter.indexOf("name") > -1 || answerFilter.indexOf("photo") > -1)
{
answerFilter = true;
}
else
{
answerFilter = false;
}
}
answerFilter ? answer = "yes" : answer = "no"; //use shorthand if/else
} else {
//display error: you must select a value
}
console.log(answer);
}
div.questionholder>div:first-child {
display: grid;
grid-template-columns: 20px auto;
width: 100%;
}
h5 {
grid-area: 1 2;
white-space: nowrap;
}
label {
grid-column: 2;
}
label>p {
display: inline;
}
input {
grid-column: 1;
}
div.holdButtons {
margin: 10px 5px;
}
div.holdButtons>a {
padding: 5px;
background-color: #f4f4f4;
cursor: pointer;
border-radius: 4px;
}
div.holdButtons>a:hover {
background-color: #e1e1e1;
}
<div class="questionholder" id="question5">
<div>
<h5>Select all elements</h5>
<input class="input5" type="checkbox" id="elementName" name="element" value="name"><label for="elementName"><p class="radioChoice">Name</p></label>
<input class="input5" type="checkbox" id="elementPhoto" name="element" value="photo"><label for="elementPhoto"><p class="radioChoice">Photo</p></label>
<input class="input5" type="checkbox" id="elementSignature" name="element" value="signature"><label for="elementSignature"><p class="radioChoice">Signature</p></label>
</div>
<div class="holdButtons">
<a class="text2button" onclick="admissible('some')">Next <i>(Array.some)</i></a>
<a class="text2button" onclick="admissible('map')">Next <i>(Array.map)</i></a>
</div>
</div>
add a comment |
<script type="text/javascript">
function admissible() {
var b = 4;
var answer = '';
var elementsList = document.querySelectorAll("#question5"+" input:checked");
//get the selected checkbox values for the missing elements
if (elementsList.length >= 0) { //Code works only if some checkbox is checked
elementsList.forEach(function(e,q,t){
if ((e.id.indexOf("photo") > -1) || (e.id.indexOf("name") > -1)) { //yes
answer = 'yes';
}
else {
answer = 'no';
}
});} else {
//display error: you must select a value
}
console.log(answer);
}
</script>
<div class="questionholder" id="question5">
<div>
<h5>Select all elements</h5>
<input class="input5" type="checkbox" id="elementName" name="element" value="name"><label for="elementName"><p class="radioChoice">Name</p></label>
<input class="input5" type="checkbox" id="elementPhoto" name="element" value="photo"><label for="elementPhoto"><p class="radioChoice">Photo</p></label>
<input class="input5" type="checkbox" id="elementSignature" name="element" value="signature"><label for="elementSignature"><p class="radioChoice">Signature</p></label>
</div>
<div class="holdButtons">
<a class="text2button" onclick="admissible()">Next</a>
</div>
</div>
you got the complete list of the checkboxes you need to iterate through it to find if any of the checkboxes you are looking for is selected.
<script type="text/javascript">
function admissible() {
var b = 4;
var answer = '';
var elementsList = document.querySelectorAll("#question5"+" input:checked");
//get the selected checkbox values for the missing elements
if (elementsList.length >= 0) { //Code works only if some checkbox is checked
elementsList.forEach(function(e,q,t){
if ((e.id.indexOf("photo") > -1) || (e.id.indexOf("name") > -1)) { //yes
answer = 'yes';
}
else {
answer = 'no';
}
});} else {
//display error: you must select a value
}
console.log(answer);
}
</script>
You didn't fix the query selector, so it still isn't working properly.
– Mouser
1 hour ago
add a comment |
I think this code is a more generous way to check if an input is checked and retrieve its value. Is more of pseudo code but you can continue from here:
var inputList = document.querySelectorAll(".input5");
for (var i = 0; i < inputList.length; i++) {
if (inputList[i].checked) {
if (/^(photo|name)$/.test(inputList[i].value)) {
// your code here
}
}
}
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
});
}
});
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%2f54853801%2ftrying-to-detect-if-any-checked-values-contains-a-specific-string%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
There were multiple errors in this code. I also changed a bit to make it simpler.
- You have to use
.indexOf()
not.indexOF()
. That's probably
what's throwing your code off. - For
document.querySelectorAll
, you only needinput:checked
.querySelectorAll
returns a NodeList which is more like an object than an array. Therefore,.indexOf()
does not work on it. You must loop through it to find the value.- I set the default value of
answer
to"no"
, and if it finds photo or name, it will set the value to"yes"
.
The snippet below works for you.
function admissible() {
var b = 4;
var answer = 'no';
var elementsList = document.querySelectorAll("input:checked");
//get the selected checkbox values for the missing elements
if (elementsList.length >= 0) { //Code works only if some checkbox is checked
for (var i = 0; i < elementsList.length; i++) {
if (elementsList[i].value == "photo" || elementsList[i].value == "name") {
answer = "yes";
}
}
} else {
//display error: you must select a value
}
console.log(answer);
}
<div class="questionholder" id="question5">
<div>
<h5>Select all elements</h5>
<input class="input5" type="checkbox" id="elementName" name="element" value="name"><label for="elementName"><p class="radioChoice">Name</p></label>
<input class="input5" type="checkbox" id="elementPhoto" name="element" value="photo"><label for="elementPhoto"><p class="radioChoice">Photo</p></label>
<input class="input5" type="checkbox" id="elementSignature" name="element" value="signature"><label for="elementSignature"><p class="radioChoice">Signature</p></label>
</div>
<div class="holdButtons">
<a class="text2button" onclick="admissible()">Next</a>
</div>
</div>
fixed the typo, but the code isn't executing... it's not storing any of the selected checkbox values
– Sweepster
1 hour ago
I'm working on it. The problem iselementsList
is not an array, but an object. So indexof won't work on it anyways. I'm working on a solution atm
– Aniket G
1 hour ago
@Sweepster updated my answer above to work for you.
– Aniket G
1 hour ago
add a comment |
There were multiple errors in this code. I also changed a bit to make it simpler.
- You have to use
.indexOf()
not.indexOF()
. That's probably
what's throwing your code off. - For
document.querySelectorAll
, you only needinput:checked
.querySelectorAll
returns a NodeList which is more like an object than an array. Therefore,.indexOf()
does not work on it. You must loop through it to find the value.- I set the default value of
answer
to"no"
, and if it finds photo or name, it will set the value to"yes"
.
The snippet below works for you.
function admissible() {
var b = 4;
var answer = 'no';
var elementsList = document.querySelectorAll("input:checked");
//get the selected checkbox values for the missing elements
if (elementsList.length >= 0) { //Code works only if some checkbox is checked
for (var i = 0; i < elementsList.length; i++) {
if (elementsList[i].value == "photo" || elementsList[i].value == "name") {
answer = "yes";
}
}
} else {
//display error: you must select a value
}
console.log(answer);
}
<div class="questionholder" id="question5">
<div>
<h5>Select all elements</h5>
<input class="input5" type="checkbox" id="elementName" name="element" value="name"><label for="elementName"><p class="radioChoice">Name</p></label>
<input class="input5" type="checkbox" id="elementPhoto" name="element" value="photo"><label for="elementPhoto"><p class="radioChoice">Photo</p></label>
<input class="input5" type="checkbox" id="elementSignature" name="element" value="signature"><label for="elementSignature"><p class="radioChoice">Signature</p></label>
</div>
<div class="holdButtons">
<a class="text2button" onclick="admissible()">Next</a>
</div>
</div>
fixed the typo, but the code isn't executing... it's not storing any of the selected checkbox values
– Sweepster
1 hour ago
I'm working on it. The problem iselementsList
is not an array, but an object. So indexof won't work on it anyways. I'm working on a solution atm
– Aniket G
1 hour ago
@Sweepster updated my answer above to work for you.
– Aniket G
1 hour ago
add a comment |
There were multiple errors in this code. I also changed a bit to make it simpler.
- You have to use
.indexOf()
not.indexOF()
. That's probably
what's throwing your code off. - For
document.querySelectorAll
, you only needinput:checked
.querySelectorAll
returns a NodeList which is more like an object than an array. Therefore,.indexOf()
does not work on it. You must loop through it to find the value.- I set the default value of
answer
to"no"
, and if it finds photo or name, it will set the value to"yes"
.
The snippet below works for you.
function admissible() {
var b = 4;
var answer = 'no';
var elementsList = document.querySelectorAll("input:checked");
//get the selected checkbox values for the missing elements
if (elementsList.length >= 0) { //Code works only if some checkbox is checked
for (var i = 0; i < elementsList.length; i++) {
if (elementsList[i].value == "photo" || elementsList[i].value == "name") {
answer = "yes";
}
}
} else {
//display error: you must select a value
}
console.log(answer);
}
<div class="questionholder" id="question5">
<div>
<h5>Select all elements</h5>
<input class="input5" type="checkbox" id="elementName" name="element" value="name"><label for="elementName"><p class="radioChoice">Name</p></label>
<input class="input5" type="checkbox" id="elementPhoto" name="element" value="photo"><label for="elementPhoto"><p class="radioChoice">Photo</p></label>
<input class="input5" type="checkbox" id="elementSignature" name="element" value="signature"><label for="elementSignature"><p class="radioChoice">Signature</p></label>
</div>
<div class="holdButtons">
<a class="text2button" onclick="admissible()">Next</a>
</div>
</div>
There were multiple errors in this code. I also changed a bit to make it simpler.
- You have to use
.indexOf()
not.indexOF()
. That's probably
what's throwing your code off. - For
document.querySelectorAll
, you only needinput:checked
.querySelectorAll
returns a NodeList which is more like an object than an array. Therefore,.indexOf()
does not work on it. You must loop through it to find the value.- I set the default value of
answer
to"no"
, and if it finds photo or name, it will set the value to"yes"
.
The snippet below works for you.
function admissible() {
var b = 4;
var answer = 'no';
var elementsList = document.querySelectorAll("input:checked");
//get the selected checkbox values for the missing elements
if (elementsList.length >= 0) { //Code works only if some checkbox is checked
for (var i = 0; i < elementsList.length; i++) {
if (elementsList[i].value == "photo" || elementsList[i].value == "name") {
answer = "yes";
}
}
} else {
//display error: you must select a value
}
console.log(answer);
}
<div class="questionholder" id="question5">
<div>
<h5>Select all elements</h5>
<input class="input5" type="checkbox" id="elementName" name="element" value="name"><label for="elementName"><p class="radioChoice">Name</p></label>
<input class="input5" type="checkbox" id="elementPhoto" name="element" value="photo"><label for="elementPhoto"><p class="radioChoice">Photo</p></label>
<input class="input5" type="checkbox" id="elementSignature" name="element" value="signature"><label for="elementSignature"><p class="radioChoice">Signature</p></label>
</div>
<div class="holdButtons">
<a class="text2button" onclick="admissible()">Next</a>
</div>
</div>
function admissible() {
var b = 4;
var answer = 'no';
var elementsList = document.querySelectorAll("input:checked");
//get the selected checkbox values for the missing elements
if (elementsList.length >= 0) { //Code works only if some checkbox is checked
for (var i = 0; i < elementsList.length; i++) {
if (elementsList[i].value == "photo" || elementsList[i].value == "name") {
answer = "yes";
}
}
} else {
//display error: you must select a value
}
console.log(answer);
}
<div class="questionholder" id="question5">
<div>
<h5>Select all elements</h5>
<input class="input5" type="checkbox" id="elementName" name="element" value="name"><label for="elementName"><p class="radioChoice">Name</p></label>
<input class="input5" type="checkbox" id="elementPhoto" name="element" value="photo"><label for="elementPhoto"><p class="radioChoice">Photo</p></label>
<input class="input5" type="checkbox" id="elementSignature" name="element" value="signature"><label for="elementSignature"><p class="radioChoice">Signature</p></label>
</div>
<div class="holdButtons">
<a class="text2button" onclick="admissible()">Next</a>
</div>
</div>
function admissible() {
var b = 4;
var answer = 'no';
var elementsList = document.querySelectorAll("input:checked");
//get the selected checkbox values for the missing elements
if (elementsList.length >= 0) { //Code works only if some checkbox is checked
for (var i = 0; i < elementsList.length; i++) {
if (elementsList[i].value == "photo" || elementsList[i].value == "name") {
answer = "yes";
}
}
} else {
//display error: you must select a value
}
console.log(answer);
}
<div class="questionholder" id="question5">
<div>
<h5>Select all elements</h5>
<input class="input5" type="checkbox" id="elementName" name="element" value="name"><label for="elementName"><p class="radioChoice">Name</p></label>
<input class="input5" type="checkbox" id="elementPhoto" name="element" value="photo"><label for="elementPhoto"><p class="radioChoice">Photo</p></label>
<input class="input5" type="checkbox" id="elementSignature" name="element" value="signature"><label for="elementSignature"><p class="radioChoice">Signature</p></label>
</div>
<div class="holdButtons">
<a class="text2button" onclick="admissible()">Next</a>
</div>
</div>
edited 1 hour ago
answered 2 hours ago
Aniket GAniket G
92120
92120
fixed the typo, but the code isn't executing... it's not storing any of the selected checkbox values
– Sweepster
1 hour ago
I'm working on it. The problem iselementsList
is not an array, but an object. So indexof won't work on it anyways. I'm working on a solution atm
– Aniket G
1 hour ago
@Sweepster updated my answer above to work for you.
– Aniket G
1 hour ago
add a comment |
fixed the typo, but the code isn't executing... it's not storing any of the selected checkbox values
– Sweepster
1 hour ago
I'm working on it. The problem iselementsList
is not an array, but an object. So indexof won't work on it anyways. I'm working on a solution atm
– Aniket G
1 hour ago
@Sweepster updated my answer above to work for you.
– Aniket G
1 hour ago
fixed the typo, but the code isn't executing... it's not storing any of the selected checkbox values
– Sweepster
1 hour ago
fixed the typo, but the code isn't executing... it's not storing any of the selected checkbox values
– Sweepster
1 hour ago
I'm working on it. The problem is
elementsList
is not an array, but an object. So indexof won't work on it anyways. I'm working on a solution atm– Aniket G
1 hour ago
I'm working on it. The problem is
elementsList
is not an array, but an object. So indexof won't work on it anyways. I'm working on a solution atm– Aniket G
1 hour ago
@Sweepster updated my answer above to work for you.
– Aniket G
1 hour ago
@Sweepster updated my answer above to work for you.
– Aniket G
1 hour ago
add a comment |
There are a lot of errors in your posted code. The code in the example below fixes them. The comments explain how it is solved.
Small summary:
Query selector
"#question5" + " input:checked"
That query selector was wrong. The checked part will select inputs that have been checked, but your node list will not contain any entries. Combining it into
"#question5 > div:first-child > input:checked"
will tell document.querySelectorAll
to select all elements of type input that are checked within the first div child element of the element with id question5
.
Iterating over a node list
Since document.querySelectorAll
returns a nodelist
(array like) which is not actually an array. In your code you used length
check to <= 0
. This will always execute the if. Drop the =
. Now the if only fires when the nodelist
has at least one entry.
Then we cast the nodeList
to an array using Array.from
and loop over it with Array.prototype.some
. Which iterates over every element and if one condition matches it will return true.
We use String.prototype.search
instead of String.prototype.indexOf
since we can use a regexp to look for the value name|photo
in one go. The |
(pipe) tells the code to either look for name
or photo
. If the result is not -1
we found the value.
Working example
function admissible(method) {
var b = 4;
var answer = '';
var elementsList = document.querySelectorAll("#question5 > div:first-child > input:checked"); //fixed the query selector
//get the selected checkbox values for the missing elements
if (elementsList.length > 0) { //Code works only if some checkbox is checked
//cast the node list to array and use array.some to iterate over entries. If one value is found answerFilter will be true.
if (method == "some") {
var answerFilter = Array.from(elementsList).some(function(element) {
return element.value.search(/name|photo/i) != -1; //check with regexp if value contains photo or name
});
}
else
{
//map returns an array and lets us return a value we want.
var answerFilter = Array.from(elementsList).map(function(element) {
return element.value;
});
//now use indexOf like in the original code
if (answerFilter.indexOf("name") > -1 || answerFilter.indexOf("photo") > -1)
{
answerFilter = true;
}
else
{
answerFilter = false;
}
}
answerFilter ? answer = "yes" : answer = "no"; //use shorthand if/else
} else {
//display error: you must select a value
}
console.log(answer);
}
div.questionholder>div:first-child {
display: grid;
grid-template-columns: 20px auto;
width: 100%;
}
h5 {
grid-area: 1 2;
white-space: nowrap;
}
label {
grid-column: 2;
}
label>p {
display: inline;
}
input {
grid-column: 1;
}
div.holdButtons {
margin: 10px 5px;
}
div.holdButtons>a {
padding: 5px;
background-color: #f4f4f4;
cursor: pointer;
border-radius: 4px;
}
div.holdButtons>a:hover {
background-color: #e1e1e1;
}
<div class="questionholder" id="question5">
<div>
<h5>Select all elements</h5>
<input class="input5" type="checkbox" id="elementName" name="element" value="name"><label for="elementName"><p class="radioChoice">Name</p></label>
<input class="input5" type="checkbox" id="elementPhoto" name="element" value="photo"><label for="elementPhoto"><p class="radioChoice">Photo</p></label>
<input class="input5" type="checkbox" id="elementSignature" name="element" value="signature"><label for="elementSignature"><p class="radioChoice">Signature</p></label>
</div>
<div class="holdButtons">
<a class="text2button" onclick="admissible('some')">Next <i>(Array.some)</i></a>
<a class="text2button" onclick="admissible('map')">Next <i>(Array.map)</i></a>
</div>
</div>
add a comment |
There are a lot of errors in your posted code. The code in the example below fixes them. The comments explain how it is solved.
Small summary:
Query selector
"#question5" + " input:checked"
That query selector was wrong. The checked part will select inputs that have been checked, but your node list will not contain any entries. Combining it into
"#question5 > div:first-child > input:checked"
will tell document.querySelectorAll
to select all elements of type input that are checked within the first div child element of the element with id question5
.
Iterating over a node list
Since document.querySelectorAll
returns a nodelist
(array like) which is not actually an array. In your code you used length
check to <= 0
. This will always execute the if. Drop the =
. Now the if only fires when the nodelist
has at least one entry.
Then we cast the nodeList
to an array using Array.from
and loop over it with Array.prototype.some
. Which iterates over every element and if one condition matches it will return true.
We use String.prototype.search
instead of String.prototype.indexOf
since we can use a regexp to look for the value name|photo
in one go. The |
(pipe) tells the code to either look for name
or photo
. If the result is not -1
we found the value.
Working example
function admissible(method) {
var b = 4;
var answer = '';
var elementsList = document.querySelectorAll("#question5 > div:first-child > input:checked"); //fixed the query selector
//get the selected checkbox values for the missing elements
if (elementsList.length > 0) { //Code works only if some checkbox is checked
//cast the node list to array and use array.some to iterate over entries. If one value is found answerFilter will be true.
if (method == "some") {
var answerFilter = Array.from(elementsList).some(function(element) {
return element.value.search(/name|photo/i) != -1; //check with regexp if value contains photo or name
});
}
else
{
//map returns an array and lets us return a value we want.
var answerFilter = Array.from(elementsList).map(function(element) {
return element.value;
});
//now use indexOf like in the original code
if (answerFilter.indexOf("name") > -1 || answerFilter.indexOf("photo") > -1)
{
answerFilter = true;
}
else
{
answerFilter = false;
}
}
answerFilter ? answer = "yes" : answer = "no"; //use shorthand if/else
} else {
//display error: you must select a value
}
console.log(answer);
}
div.questionholder>div:first-child {
display: grid;
grid-template-columns: 20px auto;
width: 100%;
}
h5 {
grid-area: 1 2;
white-space: nowrap;
}
label {
grid-column: 2;
}
label>p {
display: inline;
}
input {
grid-column: 1;
}
div.holdButtons {
margin: 10px 5px;
}
div.holdButtons>a {
padding: 5px;
background-color: #f4f4f4;
cursor: pointer;
border-radius: 4px;
}
div.holdButtons>a:hover {
background-color: #e1e1e1;
}
<div class="questionholder" id="question5">
<div>
<h5>Select all elements</h5>
<input class="input5" type="checkbox" id="elementName" name="element" value="name"><label for="elementName"><p class="radioChoice">Name</p></label>
<input class="input5" type="checkbox" id="elementPhoto" name="element" value="photo"><label for="elementPhoto"><p class="radioChoice">Photo</p></label>
<input class="input5" type="checkbox" id="elementSignature" name="element" value="signature"><label for="elementSignature"><p class="radioChoice">Signature</p></label>
</div>
<div class="holdButtons">
<a class="text2button" onclick="admissible('some')">Next <i>(Array.some)</i></a>
<a class="text2button" onclick="admissible('map')">Next <i>(Array.map)</i></a>
</div>
</div>
add a comment |
There are a lot of errors in your posted code. The code in the example below fixes them. The comments explain how it is solved.
Small summary:
Query selector
"#question5" + " input:checked"
That query selector was wrong. The checked part will select inputs that have been checked, but your node list will not contain any entries. Combining it into
"#question5 > div:first-child > input:checked"
will tell document.querySelectorAll
to select all elements of type input that are checked within the first div child element of the element with id question5
.
Iterating over a node list
Since document.querySelectorAll
returns a nodelist
(array like) which is not actually an array. In your code you used length
check to <= 0
. This will always execute the if. Drop the =
. Now the if only fires when the nodelist
has at least one entry.
Then we cast the nodeList
to an array using Array.from
and loop over it with Array.prototype.some
. Which iterates over every element and if one condition matches it will return true.
We use String.prototype.search
instead of String.prototype.indexOf
since we can use a regexp to look for the value name|photo
in one go. The |
(pipe) tells the code to either look for name
or photo
. If the result is not -1
we found the value.
Working example
function admissible(method) {
var b = 4;
var answer = '';
var elementsList = document.querySelectorAll("#question5 > div:first-child > input:checked"); //fixed the query selector
//get the selected checkbox values for the missing elements
if (elementsList.length > 0) { //Code works only if some checkbox is checked
//cast the node list to array and use array.some to iterate over entries. If one value is found answerFilter will be true.
if (method == "some") {
var answerFilter = Array.from(elementsList).some(function(element) {
return element.value.search(/name|photo/i) != -1; //check with regexp if value contains photo or name
});
}
else
{
//map returns an array and lets us return a value we want.
var answerFilter = Array.from(elementsList).map(function(element) {
return element.value;
});
//now use indexOf like in the original code
if (answerFilter.indexOf("name") > -1 || answerFilter.indexOf("photo") > -1)
{
answerFilter = true;
}
else
{
answerFilter = false;
}
}
answerFilter ? answer = "yes" : answer = "no"; //use shorthand if/else
} else {
//display error: you must select a value
}
console.log(answer);
}
div.questionholder>div:first-child {
display: grid;
grid-template-columns: 20px auto;
width: 100%;
}
h5 {
grid-area: 1 2;
white-space: nowrap;
}
label {
grid-column: 2;
}
label>p {
display: inline;
}
input {
grid-column: 1;
}
div.holdButtons {
margin: 10px 5px;
}
div.holdButtons>a {
padding: 5px;
background-color: #f4f4f4;
cursor: pointer;
border-radius: 4px;
}
div.holdButtons>a:hover {
background-color: #e1e1e1;
}
<div class="questionholder" id="question5">
<div>
<h5>Select all elements</h5>
<input class="input5" type="checkbox" id="elementName" name="element" value="name"><label for="elementName"><p class="radioChoice">Name</p></label>
<input class="input5" type="checkbox" id="elementPhoto" name="element" value="photo"><label for="elementPhoto"><p class="radioChoice">Photo</p></label>
<input class="input5" type="checkbox" id="elementSignature" name="element" value="signature"><label for="elementSignature"><p class="radioChoice">Signature</p></label>
</div>
<div class="holdButtons">
<a class="text2button" onclick="admissible('some')">Next <i>(Array.some)</i></a>
<a class="text2button" onclick="admissible('map')">Next <i>(Array.map)</i></a>
</div>
</div>
There are a lot of errors in your posted code. The code in the example below fixes them. The comments explain how it is solved.
Small summary:
Query selector
"#question5" + " input:checked"
That query selector was wrong. The checked part will select inputs that have been checked, but your node list will not contain any entries. Combining it into
"#question5 > div:first-child > input:checked"
will tell document.querySelectorAll
to select all elements of type input that are checked within the first div child element of the element with id question5
.
Iterating over a node list
Since document.querySelectorAll
returns a nodelist
(array like) which is not actually an array. In your code you used length
check to <= 0
. This will always execute the if. Drop the =
. Now the if only fires when the nodelist
has at least one entry.
Then we cast the nodeList
to an array using Array.from
and loop over it with Array.prototype.some
. Which iterates over every element and if one condition matches it will return true.
We use String.prototype.search
instead of String.prototype.indexOf
since we can use a regexp to look for the value name|photo
in one go. The |
(pipe) tells the code to either look for name
or photo
. If the result is not -1
we found the value.
Working example
function admissible(method) {
var b = 4;
var answer = '';
var elementsList = document.querySelectorAll("#question5 > div:first-child > input:checked"); //fixed the query selector
//get the selected checkbox values for the missing elements
if (elementsList.length > 0) { //Code works only if some checkbox is checked
//cast the node list to array and use array.some to iterate over entries. If one value is found answerFilter will be true.
if (method == "some") {
var answerFilter = Array.from(elementsList).some(function(element) {
return element.value.search(/name|photo/i) != -1; //check with regexp if value contains photo or name
});
}
else
{
//map returns an array and lets us return a value we want.
var answerFilter = Array.from(elementsList).map(function(element) {
return element.value;
});
//now use indexOf like in the original code
if (answerFilter.indexOf("name") > -1 || answerFilter.indexOf("photo") > -1)
{
answerFilter = true;
}
else
{
answerFilter = false;
}
}
answerFilter ? answer = "yes" : answer = "no"; //use shorthand if/else
} else {
//display error: you must select a value
}
console.log(answer);
}
div.questionholder>div:first-child {
display: grid;
grid-template-columns: 20px auto;
width: 100%;
}
h5 {
grid-area: 1 2;
white-space: nowrap;
}
label {
grid-column: 2;
}
label>p {
display: inline;
}
input {
grid-column: 1;
}
div.holdButtons {
margin: 10px 5px;
}
div.holdButtons>a {
padding: 5px;
background-color: #f4f4f4;
cursor: pointer;
border-radius: 4px;
}
div.holdButtons>a:hover {
background-color: #e1e1e1;
}
<div class="questionholder" id="question5">
<div>
<h5>Select all elements</h5>
<input class="input5" type="checkbox" id="elementName" name="element" value="name"><label for="elementName"><p class="radioChoice">Name</p></label>
<input class="input5" type="checkbox" id="elementPhoto" name="element" value="photo"><label for="elementPhoto"><p class="radioChoice">Photo</p></label>
<input class="input5" type="checkbox" id="elementSignature" name="element" value="signature"><label for="elementSignature"><p class="radioChoice">Signature</p></label>
</div>
<div class="holdButtons">
<a class="text2button" onclick="admissible('some')">Next <i>(Array.some)</i></a>
<a class="text2button" onclick="admissible('map')">Next <i>(Array.map)</i></a>
</div>
</div>
function admissible(method) {
var b = 4;
var answer = '';
var elementsList = document.querySelectorAll("#question5 > div:first-child > input:checked"); //fixed the query selector
//get the selected checkbox values for the missing elements
if (elementsList.length > 0) { //Code works only if some checkbox is checked
//cast the node list to array and use array.some to iterate over entries. If one value is found answerFilter will be true.
if (method == "some") {
var answerFilter = Array.from(elementsList).some(function(element) {
return element.value.search(/name|photo/i) != -1; //check with regexp if value contains photo or name
});
}
else
{
//map returns an array and lets us return a value we want.
var answerFilter = Array.from(elementsList).map(function(element) {
return element.value;
});
//now use indexOf like in the original code
if (answerFilter.indexOf("name") > -1 || answerFilter.indexOf("photo") > -1)
{
answerFilter = true;
}
else
{
answerFilter = false;
}
}
answerFilter ? answer = "yes" : answer = "no"; //use shorthand if/else
} else {
//display error: you must select a value
}
console.log(answer);
}
div.questionholder>div:first-child {
display: grid;
grid-template-columns: 20px auto;
width: 100%;
}
h5 {
grid-area: 1 2;
white-space: nowrap;
}
label {
grid-column: 2;
}
label>p {
display: inline;
}
input {
grid-column: 1;
}
div.holdButtons {
margin: 10px 5px;
}
div.holdButtons>a {
padding: 5px;
background-color: #f4f4f4;
cursor: pointer;
border-radius: 4px;
}
div.holdButtons>a:hover {
background-color: #e1e1e1;
}
<div class="questionholder" id="question5">
<div>
<h5>Select all elements</h5>
<input class="input5" type="checkbox" id="elementName" name="element" value="name"><label for="elementName"><p class="radioChoice">Name</p></label>
<input class="input5" type="checkbox" id="elementPhoto" name="element" value="photo"><label for="elementPhoto"><p class="radioChoice">Photo</p></label>
<input class="input5" type="checkbox" id="elementSignature" name="element" value="signature"><label for="elementSignature"><p class="radioChoice">Signature</p></label>
</div>
<div class="holdButtons">
<a class="text2button" onclick="admissible('some')">Next <i>(Array.some)</i></a>
<a class="text2button" onclick="admissible('map')">Next <i>(Array.map)</i></a>
</div>
</div>
function admissible(method) {
var b = 4;
var answer = '';
var elementsList = document.querySelectorAll("#question5 > div:first-child > input:checked"); //fixed the query selector
//get the selected checkbox values for the missing elements
if (elementsList.length > 0) { //Code works only if some checkbox is checked
//cast the node list to array and use array.some to iterate over entries. If one value is found answerFilter will be true.
if (method == "some") {
var answerFilter = Array.from(elementsList).some(function(element) {
return element.value.search(/name|photo/i) != -1; //check with regexp if value contains photo or name
});
}
else
{
//map returns an array and lets us return a value we want.
var answerFilter = Array.from(elementsList).map(function(element) {
return element.value;
});
//now use indexOf like in the original code
if (answerFilter.indexOf("name") > -1 || answerFilter.indexOf("photo") > -1)
{
answerFilter = true;
}
else
{
answerFilter = false;
}
}
answerFilter ? answer = "yes" : answer = "no"; //use shorthand if/else
} else {
//display error: you must select a value
}
console.log(answer);
}
div.questionholder>div:first-child {
display: grid;
grid-template-columns: 20px auto;
width: 100%;
}
h5 {
grid-area: 1 2;
white-space: nowrap;
}
label {
grid-column: 2;
}
label>p {
display: inline;
}
input {
grid-column: 1;
}
div.holdButtons {
margin: 10px 5px;
}
div.holdButtons>a {
padding: 5px;
background-color: #f4f4f4;
cursor: pointer;
border-radius: 4px;
}
div.holdButtons>a:hover {
background-color: #e1e1e1;
}
<div class="questionholder" id="question5">
<div>
<h5>Select all elements</h5>
<input class="input5" type="checkbox" id="elementName" name="element" value="name"><label for="elementName"><p class="radioChoice">Name</p></label>
<input class="input5" type="checkbox" id="elementPhoto" name="element" value="photo"><label for="elementPhoto"><p class="radioChoice">Photo</p></label>
<input class="input5" type="checkbox" id="elementSignature" name="element" value="signature"><label for="elementSignature"><p class="radioChoice">Signature</p></label>
</div>
<div class="holdButtons">
<a class="text2button" onclick="admissible('some')">Next <i>(Array.some)</i></a>
<a class="text2button" onclick="admissible('map')">Next <i>(Array.map)</i></a>
</div>
</div>
edited 1 hour ago
answered 1 hour ago
MouserMouser
11.4k21947
11.4k21947
add a comment |
add a comment |
<script type="text/javascript">
function admissible() {
var b = 4;
var answer = '';
var elementsList = document.querySelectorAll("#question5"+" input:checked");
//get the selected checkbox values for the missing elements
if (elementsList.length >= 0) { //Code works only if some checkbox is checked
elementsList.forEach(function(e,q,t){
if ((e.id.indexOf("photo") > -1) || (e.id.indexOf("name") > -1)) { //yes
answer = 'yes';
}
else {
answer = 'no';
}
});} else {
//display error: you must select a value
}
console.log(answer);
}
</script>
<div class="questionholder" id="question5">
<div>
<h5>Select all elements</h5>
<input class="input5" type="checkbox" id="elementName" name="element" value="name"><label for="elementName"><p class="radioChoice">Name</p></label>
<input class="input5" type="checkbox" id="elementPhoto" name="element" value="photo"><label for="elementPhoto"><p class="radioChoice">Photo</p></label>
<input class="input5" type="checkbox" id="elementSignature" name="element" value="signature"><label for="elementSignature"><p class="radioChoice">Signature</p></label>
</div>
<div class="holdButtons">
<a class="text2button" onclick="admissible()">Next</a>
</div>
</div>
you got the complete list of the checkboxes you need to iterate through it to find if any of the checkboxes you are looking for is selected.
<script type="text/javascript">
function admissible() {
var b = 4;
var answer = '';
var elementsList = document.querySelectorAll("#question5"+" input:checked");
//get the selected checkbox values for the missing elements
if (elementsList.length >= 0) { //Code works only if some checkbox is checked
elementsList.forEach(function(e,q,t){
if ((e.id.indexOf("photo") > -1) || (e.id.indexOf("name") > -1)) { //yes
answer = 'yes';
}
else {
answer = 'no';
}
});} else {
//display error: you must select a value
}
console.log(answer);
}
</script>
You didn't fix the query selector, so it still isn't working properly.
– Mouser
1 hour ago
add a comment |
<script type="text/javascript">
function admissible() {
var b = 4;
var answer = '';
var elementsList = document.querySelectorAll("#question5"+" input:checked");
//get the selected checkbox values for the missing elements
if (elementsList.length >= 0) { //Code works only if some checkbox is checked
elementsList.forEach(function(e,q,t){
if ((e.id.indexOf("photo") > -1) || (e.id.indexOf("name") > -1)) { //yes
answer = 'yes';
}
else {
answer = 'no';
}
});} else {
//display error: you must select a value
}
console.log(answer);
}
</script>
<div class="questionholder" id="question5">
<div>
<h5>Select all elements</h5>
<input class="input5" type="checkbox" id="elementName" name="element" value="name"><label for="elementName"><p class="radioChoice">Name</p></label>
<input class="input5" type="checkbox" id="elementPhoto" name="element" value="photo"><label for="elementPhoto"><p class="radioChoice">Photo</p></label>
<input class="input5" type="checkbox" id="elementSignature" name="element" value="signature"><label for="elementSignature"><p class="radioChoice">Signature</p></label>
</div>
<div class="holdButtons">
<a class="text2button" onclick="admissible()">Next</a>
</div>
</div>
you got the complete list of the checkboxes you need to iterate through it to find if any of the checkboxes you are looking for is selected.
<script type="text/javascript">
function admissible() {
var b = 4;
var answer = '';
var elementsList = document.querySelectorAll("#question5"+" input:checked");
//get the selected checkbox values for the missing elements
if (elementsList.length >= 0) { //Code works only if some checkbox is checked
elementsList.forEach(function(e,q,t){
if ((e.id.indexOf("photo") > -1) || (e.id.indexOf("name") > -1)) { //yes
answer = 'yes';
}
else {
answer = 'no';
}
});} else {
//display error: you must select a value
}
console.log(answer);
}
</script>
You didn't fix the query selector, so it still isn't working properly.
– Mouser
1 hour ago
add a comment |
<script type="text/javascript">
function admissible() {
var b = 4;
var answer = '';
var elementsList = document.querySelectorAll("#question5"+" input:checked");
//get the selected checkbox values for the missing elements
if (elementsList.length >= 0) { //Code works only if some checkbox is checked
elementsList.forEach(function(e,q,t){
if ((e.id.indexOf("photo") > -1) || (e.id.indexOf("name") > -1)) { //yes
answer = 'yes';
}
else {
answer = 'no';
}
});} else {
//display error: you must select a value
}
console.log(answer);
}
</script>
<div class="questionholder" id="question5">
<div>
<h5>Select all elements</h5>
<input class="input5" type="checkbox" id="elementName" name="element" value="name"><label for="elementName"><p class="radioChoice">Name</p></label>
<input class="input5" type="checkbox" id="elementPhoto" name="element" value="photo"><label for="elementPhoto"><p class="radioChoice">Photo</p></label>
<input class="input5" type="checkbox" id="elementSignature" name="element" value="signature"><label for="elementSignature"><p class="radioChoice">Signature</p></label>
</div>
<div class="holdButtons">
<a class="text2button" onclick="admissible()">Next</a>
</div>
</div>
you got the complete list of the checkboxes you need to iterate through it to find if any of the checkboxes you are looking for is selected.
<script type="text/javascript">
function admissible() {
var b = 4;
var answer = '';
var elementsList = document.querySelectorAll("#question5"+" input:checked");
//get the selected checkbox values for the missing elements
if (elementsList.length >= 0) { //Code works only if some checkbox is checked
elementsList.forEach(function(e,q,t){
if ((e.id.indexOf("photo") > -1) || (e.id.indexOf("name") > -1)) { //yes
answer = 'yes';
}
else {
answer = 'no';
}
});} else {
//display error: you must select a value
}
console.log(answer);
}
</script>
<script type="text/javascript">
function admissible() {
var b = 4;
var answer = '';
var elementsList = document.querySelectorAll("#question5"+" input:checked");
//get the selected checkbox values for the missing elements
if (elementsList.length >= 0) { //Code works only if some checkbox is checked
elementsList.forEach(function(e,q,t){
if ((e.id.indexOf("photo") > -1) || (e.id.indexOf("name") > -1)) { //yes
answer = 'yes';
}
else {
answer = 'no';
}
});} else {
//display error: you must select a value
}
console.log(answer);
}
</script>
<div class="questionholder" id="question5">
<div>
<h5>Select all elements</h5>
<input class="input5" type="checkbox" id="elementName" name="element" value="name"><label for="elementName"><p class="radioChoice">Name</p></label>
<input class="input5" type="checkbox" id="elementPhoto" name="element" value="photo"><label for="elementPhoto"><p class="radioChoice">Photo</p></label>
<input class="input5" type="checkbox" id="elementSignature" name="element" value="signature"><label for="elementSignature"><p class="radioChoice">Signature</p></label>
</div>
<div class="holdButtons">
<a class="text2button" onclick="admissible()">Next</a>
</div>
</div>
you got the complete list of the checkboxes you need to iterate through it to find if any of the checkboxes you are looking for is selected.
<script type="text/javascript">
function admissible() {
var b = 4;
var answer = '';
var elementsList = document.querySelectorAll("#question5"+" input:checked");
//get the selected checkbox values for the missing elements
if (elementsList.length >= 0) { //Code works only if some checkbox is checked
elementsList.forEach(function(e,q,t){
if ((e.id.indexOf("photo") > -1) || (e.id.indexOf("name") > -1)) { //yes
answer = 'yes';
}
else {
answer = 'no';
}
});} else {
//display error: you must select a value
}
console.log(answer);
}
</script>
<script type="text/javascript">
function admissible() {
var b = 4;
var answer = '';
var elementsList = document.querySelectorAll("#question5"+" input:checked");
//get the selected checkbox values for the missing elements
if (elementsList.length >= 0) { //Code works only if some checkbox is checked
elementsList.forEach(function(e,q,t){
if ((e.id.indexOf("photo") > -1) || (e.id.indexOf("name") > -1)) { //yes
answer = 'yes';
}
else {
answer = 'no';
}
});} else {
//display error: you must select a value
}
console.log(answer);
}
</script>
<div class="questionholder" id="question5">
<div>
<h5>Select all elements</h5>
<input class="input5" type="checkbox" id="elementName" name="element" value="name"><label for="elementName"><p class="radioChoice">Name</p></label>
<input class="input5" type="checkbox" id="elementPhoto" name="element" value="photo"><label for="elementPhoto"><p class="radioChoice">Photo</p></label>
<input class="input5" type="checkbox" id="elementSignature" name="element" value="signature"><label for="elementSignature"><p class="radioChoice">Signature</p></label>
</div>
<div class="holdButtons">
<a class="text2button" onclick="admissible()">Next</a>
</div>
</div>
<script type="text/javascript">
function admissible() {
var b = 4;
var answer = '';
var elementsList = document.querySelectorAll("#question5"+" input:checked");
//get the selected checkbox values for the missing elements
if (elementsList.length >= 0) { //Code works only if some checkbox is checked
elementsList.forEach(function(e,q,t){
if ((e.id.indexOf("photo") > -1) || (e.id.indexOf("name") > -1)) { //yes
answer = 'yes';
}
else {
answer = 'no';
}
});} else {
//display error: you must select a value
}
console.log(answer);
}
</script>
<div class="questionholder" id="question5">
<div>
<h5>Select all elements</h5>
<input class="input5" type="checkbox" id="elementName" name="element" value="name"><label for="elementName"><p class="radioChoice">Name</p></label>
<input class="input5" type="checkbox" id="elementPhoto" name="element" value="photo"><label for="elementPhoto"><p class="radioChoice">Photo</p></label>
<input class="input5" type="checkbox" id="elementSignature" name="element" value="signature"><label for="elementSignature"><p class="radioChoice">Signature</p></label>
</div>
<div class="holdButtons">
<a class="text2button" onclick="admissible()">Next</a>
</div>
</div>
answered 1 hour ago
Mian AlmasMian Almas
12018
12018
You didn't fix the query selector, so it still isn't working properly.
– Mouser
1 hour ago
add a comment |
You didn't fix the query selector, so it still isn't working properly.
– Mouser
1 hour ago
You didn't fix the query selector, so it still isn't working properly.
– Mouser
1 hour ago
You didn't fix the query selector, so it still isn't working properly.
– Mouser
1 hour ago
add a comment |
I think this code is a more generous way to check if an input is checked and retrieve its value. Is more of pseudo code but you can continue from here:
var inputList = document.querySelectorAll(".input5");
for (var i = 0; i < inputList.length; i++) {
if (inputList[i].checked) {
if (/^(photo|name)$/.test(inputList[i].value)) {
// your code here
}
}
}
add a comment |
I think this code is a more generous way to check if an input is checked and retrieve its value. Is more of pseudo code but you can continue from here:
var inputList = document.querySelectorAll(".input5");
for (var i = 0; i < inputList.length; i++) {
if (inputList[i].checked) {
if (/^(photo|name)$/.test(inputList[i].value)) {
// your code here
}
}
}
add a comment |
I think this code is a more generous way to check if an input is checked and retrieve its value. Is more of pseudo code but you can continue from here:
var inputList = document.querySelectorAll(".input5");
for (var i = 0; i < inputList.length; i++) {
if (inputList[i].checked) {
if (/^(photo|name)$/.test(inputList[i].value)) {
// your code here
}
}
}
I think this code is a more generous way to check if an input is checked and retrieve its value. Is more of pseudo code but you can continue from here:
var inputList = document.querySelectorAll(".input5");
for (var i = 0; i < inputList.length; i++) {
if (inputList[i].checked) {
if (/^(photo|name)$/.test(inputList[i].value)) {
// your code here
}
}
}
edited 24 mins ago
answered 1 hour ago
CocestCocest
931211
931211
add a comment |
add a comment |
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.
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%2f54853801%2ftrying-to-detect-if-any-checked-values-contains-a-specific-string%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
4
It's
.indexOf()
not.indexOF()
– Andreas
2 hours ago
That is a typo
indexOF()
suppose to beindexOf()
.– Cocest
1 hour ago
fixed thet ypo but it still own't store the values
– Sweepster
1 hour ago
Try this
console.log(elementsList);
. What is the result?– Cocest
1 hour ago
it says elementsList.indexOf is not a function
– Sweepster
1 hour ago