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













6















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







share|improve this question




















  • 4





    It's .indexOf() not .indexOF()

    – Andreas
    2 hours 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











  • 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
















6















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







share|improve this question




















  • 4





    It's .indexOf() not .indexOF()

    – Andreas
    2 hours 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











  • 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














6












6








6








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







share|improve this question
















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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








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 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











  • 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














  • 4





    It's .indexOf() not .indexOF()

    – Andreas
    2 hours 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











  • 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








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












4 Answers
4






active

oldest

votes


















2














There were multiple errors in this code. I also changed a bit to make it simpler.




  1. You have to use .indexOf() not .indexOF(). That's probably
    what's throwing your code off.

  2. For document.querySelectorAll, you only need input:checked


  3. .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.

  4. 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>








share|improve this answer


























  • 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











  • @Sweepster updated my answer above to work for you.

    – Aniket G
    1 hour ago



















2














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>








share|improve this answer

































    0

















    <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>





    share|improve this answer
























    • You didn't fix the query selector, so it still isn't working properly.

      – Mouser
      1 hour ago



















    0














    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
    
        }
    
    }
    
}





    share|improve this answer

























      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


















      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









      2














      There were multiple errors in this code. I also changed a bit to make it simpler.




      1. You have to use .indexOf() not .indexOF(). That's probably
        what's throwing your code off.

      2. For document.querySelectorAll, you only need input:checked


      3. .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.

      4. 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>








      share|improve this answer


























      • 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











      • @Sweepster updated my answer above to work for you.

        – Aniket G
        1 hour ago
















      2














      There were multiple errors in this code. I also changed a bit to make it simpler.




      1. You have to use .indexOf() not .indexOF(). That's probably
        what's throwing your code off.

      2. For document.querySelectorAll, you only need input:checked


      3. .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.

      4. 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>








      share|improve this answer


























      • 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











      • @Sweepster updated my answer above to work for you.

        – Aniket G
        1 hour ago














      2












      2








      2







      There were multiple errors in this code. I also changed a bit to make it simpler.




      1. You have to use .indexOf() not .indexOF(). That's probably
        what's throwing your code off.

      2. For document.querySelectorAll, you only need input:checked


      3. .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.

      4. 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>








      share|improve this answer















      There were multiple errors in this code. I also changed a bit to make it simpler.




      1. You have to use .indexOf() not .indexOF(). That's probably
        what's throwing your code off.

      2. For document.querySelectorAll, you only need input:checked


      3. .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.

      4. 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>






      share|improve this answer














      share|improve this answer



      share|improve this answer








      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 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



















      • 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











      • @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













      2














      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>








      share|improve this answer






























        2














        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>








        share|improve this answer




























          2












          2








          2







          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>








          share|improve this answer















          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>






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited 1 hour ago

























          answered 1 hour ago









          MouserMouser

          11.4k21947




          11.4k21947























              0

















              <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>





              share|improve this answer
























              • You didn't fix the query selector, so it still isn't working properly.

                – Mouser
                1 hour ago
















              0

















              <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>





              share|improve this answer
























              • You didn't fix the query selector, so it still isn't working properly.

                – Mouser
                1 hour ago














              0












              0








              0










              <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>





              share|improve this answer
















              <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>






              share|improve this answer












              share|improve this answer



              share|improve this answer










              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



















              • 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











              0














              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
              
        }
              
    }
              
}





              share|improve this answer






























                0














                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
                
        }
                
    }
                
}





                share|improve this answer




























                  0












                  0








                  0







                  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
                  
        }
                  
    }
                  
}





                  share|improve this answer















                  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
                  
        }
                  
    }
                  
}






                  share|improve this answer














                  share|improve this answer



                  share|improve this answer








                  edited 24 mins ago

























                  answered 1 hour ago









                  CocestCocest

                  931211




                  931211






























                      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














                      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





















































                      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







                      -

                      Popular posts from this blog

                      Szabolcs (Ungheria) Altri progetti | Menu di navigazione48°10′14.56″N 21°29′33.14″E /...

                      Image
                      Comuni della provincia di Szabolcs-Szatmár-Bereg Ungheria2001provincia di Szabolcs-Szatmár-Bereg Szabolcs comune Localizzazione Stato   Ungheria Regione Grande Pianura Settentrionale Provincia Szabolcs-Szatmár-Bereg Territorio Coordinate 48°10′14.56″N 21°29′33.14″E  /  48.17071°N 21.49254°E 48.17071; 21.49254  ( Szabolcs ) Coordinate: 48°10′14.56″N 21°29′33.14″E  /  48.17071°N 21.49254°E 48.17071; 21.49254  ( Szabolcs ) Superficie 5,88 km² Abitanti 425 (2001) Densità 72,28 ab./km² Altre informazioni Cod. postale 4467 Prefisso 42 Fuso orario UTC+1 Codice KSH 19169 Cartografia Szabolcs Sito istituzionale Modifica dati su Wikidata  · Manuale Szabolcs è un comune dell'Ungheria di 425 abitanti (dati 2001). È situato nella provincia di Szabolcs-Szatmár-Bereg. Altri progetti | Altri progetti Wikimedia Commons Wikimedia Commons contiene immagini o altri file su Szabolcs .mw-parser-output
                      Read more

                      Discografia di Klaus Schulze Indice Album in studio | Album dal vivo | Singoli | Antologie | Colonne...

                      Image
                      Discografie di artisti tedeschi Voce principale: Klaus Schulze . Discografia di Klaus Schulze Klaus Schulze e Lisa Gerrard durante un concerto Album in studio 56 ↙ Album dal vivo 15 ↙ Raccolte 37 ↙ Singoli 4 ↙ Album video 1 ↙ Colonne sonore 4 ↙ Indice 1 Album in studio 1.1 Solisti 1.1.1 Come Richard Wahnfried 1.2 Collaborazioni 1.2.1 Con Rainer Bloss 1.2.2 Con Rainer Bloss ed Ernst Fuchs 1.2.3 Con Lisa Gerrard 1.2.4 Con Andreas Grosser 1.2.5 Con Pete Namlook 1.2.6 Con Pete Namlook e Bill Laswell 1.2.7 Con Michael Shrieve 1.2.8 Con Solar Moon 1.2.9 Con artisti vari 2 Album dal vivo 3 Singoli 4 Antologie 5 Colonne sonore 6 Videografia 7 Collegamenti musica Album in studio | Solisti | 1972 – Irrlicht 1973 – Cyborg 1974 – Blackdance 1975 – Timewind 1975 – Picture Music 1976 – Moondawn 1977 – Mirage 1978 – "X" 1979 – Dune
                      Read more

                      How to make inet_server_addr() return localhost in spite of ::1/128RETURN NEXT in Postgres FunctionConnect to...

                      Image
                      Potential client has a problematic employee I can't work with Can the "Friends" spell be used without making the target hostile? Does it take energy to move something in a circle? Why are carbons of Inositol chiral centers? Count repetitions of an array Which RAF squadrons and aircraft types took part in the bombing of Berlin on the 25th of August 1940? Memory usage: #define vs. static const for uint8_t Broad Strokes - missing letter riddle Why does 0.-5 evaluate to -5? Why is 'diphthong' pronounced the way it is? Why did Luke use his left hand to shoot?
                      Read more