Question

我正在设置一个多页调查/研究，每页有2个多选单选按钮问题（第一页除外，无需回答）。我有一个下一个功能，检查以确保给出答案。它可以工作，但是当传递两个值以便检查两个问题时，它只检查其中一个。我使用console.log来显示通过该函数的名称，并且只传递一个名称。我可以通过仅回答其中一个问题转到下一页，即使它不是根据控制台日志中的名称传递函数的问题。如何让它检查我在onclick中指定的所有问题？

这是“继续”按钮的代码，其中包含onclick的next（）函数。当我传递两个名字时，它只会检查2中的1个。

<input type="button" value="Continue" onclick="next('Q1Answer','Q1Rating');"/>

这些是单选按钮：

问题1

<input name="Q1Answer" type="radio" value="Right" /> Right&emsp;
<input name="Q1Answer" type="radio" value="Wrong" /> Wrong

问题2

Less confident &nbsp; &nbsp; 
    <input class="rating" name="Qrating" type="radio" id="v1" value="1" />
    <input class="rating" name="Qrating" type="radio" id="v2" value="2" />
    <input class="rating" name="Qrating" type="radio" id="v3" value="3" />
    <input class="rating" name="Qrating" type="radio" id="v4" value="4" />
    <input class="rating" name="Qrating" type="radio" id="v5" value="5" />
&nbsp; &nbsp; More confident

这是我下一个功能的当前版本。我添加了一个for循环，试图让它迭代传递给它的所有项目，但这并没有解决问题（没有循环它的工作方式相同）。此代码位于我在HTML代码中调用的javascript文件中。

function next(name) {
    for (i in name) {
        if (name.startsWith('Q')) {
            if (!document.querySelectorAll('input[name]:checked').length) {
                alert("Please answer the question.");
                return;
}
}
}   
    current++;
    swap(effectivePage(current - 1), effectivePage(current));
}

（swap和effectivePage是进入下一页的其他功能，如果需要测试，我可以添加它们）

我使用了name作为标识符，但如果能以某种方式使这更容易，可以很容易地用ID替换。我使用了startsWith if条件，以便只检查实际问题。

我有基本的HTML知识，除了我自己想要解决的问题之外，根本不了解Javascript，所以我希望解决方案很简单。

Answer 1

因此，我设法发现了两个问题，这些问题使您的代码无法按照您想要的方式执行。当您在HTML中创建下一个调用时，您尝试传入多个名称字符串，但您的next函数只接受一个参数。这意味着您的调用只会获得第一个要检查的字符串，在这种情况下是Q1Answer。如果将传入的值更改为字符串数组，则可以对所需的所有名称执行检查。此外，请务必在下次通话中传递您要检查的输入的确切名称。如果这些名称不正确，您的代码将会使用户无法访问下一页，因为它会认为该输入从未被选中（因为它在页面上根本找不到该输入）。

其次，当您使用查询选择器执行检查时，您没有检查任何特定名称，因此即使它应该检查第二个输入标记，它总是找到所选的第一个值。我已修改该检查，现在专门查找传入的名称，因此它只会匹配有问题的输入（即，第一遍将检查Q1Answer，第二遍将检查Qrating）。

＆＃13;

function next(name) {
  for (i in name) {
    if (name[i].startsWith('Q')) {
      if (!document.querySelectorAll('input[name=' + name[i] + ']:checked').length) {
        alert("Please answer the question.");
        return;
      }
    }
  }
  current++;
  swap(effectivePage(current - 1), effectivePage(current));
}

＆＃13;

<input type="button" value="Continue" onclick="next(['Q1Answer','Qrating']);" />

<input name="Q1Answer" type="radio" value="Right" /> Right&emsp;
<input name="Q1Answer" type="radio" value="Wrong" /> Wrong

<br/> Less confident &nbsp; &nbsp;
<input class="rating" name="Qrating" type="radio" id="v1" value="1" />
<input class="rating" name="Qrating" type="radio" id="v2" value="2" />
<input class="rating" name="Qrating" type="radio" id="v3" value="3" />
<input class="rating" name="Qrating" type="radio" id="v4" value="4" />
<input class="rating" name="Qrating" type="radio" id="v5" value="5" /> &nbsp; &nbsp; More confident

＆＃13;

需要多个单选按钮的答案才能转到下一页HTML

1 个答案: