如何获得所选选项的数量

时间:2019-03-04 22:24:52

标签: javascript

我需要一些帮助。我正在尝试使用“ no”类获取元素中所选选项的长度(这意味着使用no类名称获取所选选项的数量。将其复制并粘贴到浏览器中以查看我在说什么,然后选择自己选择看)。

这是我的html

log.txt
function Starting(e) {
  e.preventDefault();
  var artchoices = document.querySelectorAll(".art");
  var program = document.querySelectorAll(".program");
  var choice = document.querySelectorAll(".choice");
  var no = document.querySelectorAll(".no");
  var music = document.querySelectorAll(".music");
  var allchoices;

  for (var e = 0; e < choice.length; e++) {
    if (choice[e].selected == true) {
      allchoices = true;
      break;
    }
  }

  if (allchoices)
    console.log("Please make sure all options are selected");
  else {
    if (no.length.selected >= choice.length)
      console.log("hello");
  }
  return false;
}

2 个答案:

答案 0 :(得分:0)

如果您有权访问jQuery,则可以使用以下脚本:

_exit(2)

答案 1 :(得分:-1)

您可以使用:checked伪类来查找所有选定的选项元素。在这种情况下,我更改了您在querySelectorAll中使用的选择器,以使no仅具有类别为“ no”的选定选项。

正如@PatrickRoberts在评论中提到的那样,使用value属性是一个更好的主意。一方面,它在语义上是正确的(option应该有value用于表单提交)。

function Starting(e) {
  e.preventDefault();
  var artchoices = document.querySelectorAll(".art");
  var program = document.querySelectorAll(".program");
  var choice = document.querySelectorAll(".choice");
  var no = document.querySelectorAll(".no:checked");
  var music = document.querySelectorAll(".music");
  var allchoices;

  for (var e = 0; e < choice.length; e++) {
    if (choice[e].selected == true) {
      allchoices = true;
      break;
    }
  }

  if (allchoices)
    console.log("Please make sure all options are selected");
  else {
    if (no.length >= choice.length)
      console.log("hello");
  }
  return false;
}
<!DOCTYPE HTML>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="quiz" content="myown quiz">
  <title>Quiz</title>
</head>

<body>
  <script type="text/javascript" src="machine.js"></script>
  <link rel="stylesheet" type="text/css" href="quizformatting.css">
  <h1>Choose the major right for you</h1>
  <pre>
    <form>
    Do you like enjoy programming?
    <select>
    <option class="choice">Select a value</option>
    <option class="program">Yes</option>
    <option class="no">No</option>
    </select>
    
    
    Do you enjoy 2d animation and 3d animation?
    <select>
    <option class="choice">Select a value</option>
    <option class="art">Yes</option>
    <option class="no">no</option>
    </select>
    
    
    Do you like music
    <select>
    <option class="choice">Select a value</option>
    <option>Yes</option>
    <option class="no">no</option>
    </select>
    
    
    
    What are your favorite pastimes?
    <select>
    <option class="choice">Select a value</option>
    <option class="music">Listening to music</option>
    <option>making websites</option>
    <option class="art">Drawing</option>
    <option class="no">None of these</option>
    </select>
    
    
    
    
    Out of all the activities you like to do, which one do you enjoy the most?
    <select>
    <option class="choice">Select a value</option>
    <option class="art">Painting and drawing</option>
    <option class="music">Playing instruments</option>
    <option class="art">Drawing</option>
    <option class="no">None of these</option>
    </select>
    
    
    
    Would you be interested in making art or coding for video games?
    <select>
    <option class="choice">Select a value</option>
    <option class="program">I would be interested in learning the programming 
    languages used to create the scripting for games</option>
    <option class="art">I would like to the models and the environment for 
     modeling</option>
    <option class="no">I'm not interested in either of these options</option>
    </select>
    
    
    
    Do you enjoy making websites or learning how to sing?
    <select>
    <option class="choice">Select a value</option>
    <option class="music">Learning how to sing</option>
    <option class="program">making websites for projects</option>
    <option class="no">I'm not interested in any of this</option>
    </select>
    
    
    
    
    Do you enjoy listening to music more or making programming applications?
    <select>
    <option class="choice">Select a value</option>
    <option class="music">I would like to listen to music</option>
    <option class="program">Programming is my thing</option>
    <option class="art">I'm more of a drawer</option>
    <option class="no">I don't like any of these options</option>
    </select>
    
    
    
    Which skillset are you more interested in learning?
    <select>
    <option class="choice">Select a value</option>
    <option class="music">Learning the notes of instruments</option>
    <option class="program">Learning the language of javascript</option>
    <option class="art">I like anime, so I would love to learn how to animate in 
    anime style</option>
    <option class="no">I don't want to do any of these options</option>
    </select>
    
    
    
    Please press the button to get your answer
    
    <button onclick="Starting(event);">Click me</button>
    </form>
    </pre>
</body>

</html>




Here is my javascript file: