Question

我正在进行测验。它有两个问题，每个问题有四个答案。我想隐藏提交按钮，直到用户回答所有问题。

我的代码：

var answered = 0;
function checkAllAns(){
  ++answered;
  if (answered >= 10)
  {
    document.getElementById("stop-btn").style.display = "inline-block";
    document.getElementById("stop-btn").style.opacity = "1";
  }
}

仅当用户每个问题回答一次时才有效，但如果用户犯了错误怎么办？假设用户回答相同问题10次，即使所有问题都尚未回答，也会出现提交按钮。

我用它替换它：

function checkAllAns(index){

  var checkedIndex = [];

  if ( ansAll[index] == false){
    ansAll[index] = true;
  }

  for (i = 0; i < ansAll.length; ++i) {
    if (ansAll[i] == true){
      var checked = 0;
      for (j = 0; j < checkedIndex.length; ++j){
        if ( checkedIndex[j] == ansAll[i] ){
          checked = 1;
        }
        else{
          checkedIndex.push( ansAll[i] );
        }
      }
      if (checked == 0){
        ++answered;
      }
    }
  }

  if (answered >= 10){
    document.getElementById("stop-btn").style.display = "inline-block";
    document.getElementById("stop-btn").style.opacity = "1";
  }
}

它不起作用（如果它正在工作，我不会在这里回答......）

我的代码出了什么问题？如果你找到另一种方法来实现这一目标，你可以建议我。

谢谢，

我的完整代码在这里：http://codepen.io/anon/pen/EjYWWx

Answer 1

这是一个适合你的JSFiddle：http://jsfiddle.net/soyn0xag/6/

不使用迭代和循环的复杂嵌套，而是使用JQuery。

检查密钥是否已离开文本区域（又名完成）

 $("input[type='text'], textarea").on("keyup", function(){
        if($(this).val() != "" && $("textarea").val() != "" && $("input[name='category']").is(":checked") == true){
            $("input[type='submit']").removeAttr("disabled");
        }
    });

检查是否已选中或更改复选框。

$("input[name='category']").on("change", function(){
    if($(this).val() != "" && $("textarea").val() != "" && $("input[name='category']").is(":checked") == true){
        $("input[type='submit']").removeAttr("disabled");
    }
});

检查是否检查了元素，检查所有内容时将更改提交更改为显示。这只是一个片段，您需要扩展。

Answer 2

看起来你有正确的想法，但你工作太辛苦了，你可以只使用一个数组并迭代（除非你担心时间攻击），如下所示：

function checkAllAns(index)
{
 ansAll[index] = true;

 for (i = 0; i < ansAll.length; ++i)
 {
  if (ansAll[i] != true)
  {
    break;
  }
  if (i == ansAll.length-1)
  {
   document.getElementById("stop-btn").style.display = "inline-block";
   document.getElementById("stop-btn").style.opacity = "1";
  }
 }
}

Answer 3

我建议尝试使用更简单的代码并尝试将其集成到单个解决方案中。像这样（未经测试）：

function answered(){
  return document.querySelectAll('.question.answered').length;
  }

var answers = document.querySelectAll('.question .answer');
for (var i = 0; i < answers.length; i++) {
  answers[i].onclick = function(e){

    // This should be the question
    e.target.parentNode.classList.add('answered');

    // Check how many questions are answered
    if (answered() > 10) {
      // DO SOMETHING
      }
    }
  }

未经测试，但以这种方式更容易。如果您还使用了jQuery或类似的库，那将更容易（正如Bradley Wilson的答案所指出的那样）。

Answer 4

这是一种方法。保留数组answered并向其添加问题索引，除非该问题已得到解答。当数组长度为10时，所有问题都已得到解答

var answered = [];
function checkAllAns (index) {
   if (answered.indexOf (index) >= 0)
      answered.push (index);

   if (answered.length == 10)
   {
      document.getElementById("stop-btn").style.display = "inline-block";
      document.getElementById("stop-btn").style.opacity = "1";
   }
}

如何知道用户点击同一个元素？

4 个答案: