javascript - 取消选中并模拟单击 Javascript 中的复选框

Question

诚然，我是编程方面的 super 新手。我正在尝试设计一段快速的 javascript 以在网站上注入(inject)一个类，该类将取消选中并模拟对一系列复选框的单击。这不是恶意的，我们用来下载数据以供在此类中使用的 Web 表单提供了比必要更多的变量，如果我们可以“取消选中”所有内容并仅选中我们想要的变量，将会方便得多。但是，简单地通过 javascript 注入(inject)取消选中这些框不会产生预期的结果。必须在每个框上模拟鼠标单击。我一直在尝试使用 .click() 函数无济于事。任何帮助是极大的赞赏。我的以下代码失败并出现以下错误:

“TypeError:无法读取 null 的属性‘click’”

代码:

 var getInputs = document.getElementsByTagName("input");
 for (var i = 0, max = getInputs.length; i < max; i++){
 if (getInputs[i].type === 'checkbox')
 getInputs[i].checked = false;
 document.getElementById('shr_SUBJECT=VC' + i).click();
 }

--------编辑#1----------------

仅供引用，这是我正在尝试使用它的网站:

http://factfinder2.census.gov/faces/nav/jsf/pages/searchresults.xhtml

如果您搜索并打开这些表格中的任何一个，它们都是巨大的。如果我可以通过 javascript 一次“取消选中”和“单击”它们来轻松减少变量，那就太棒了。

底部的代码几乎可以工作。
我现在遇到的问题是它在第一次或第二次运行 for 循环后抛出错误:

 "TypeError: document.getElementById(...) is null"

我明白这是因为它试图找到的值不存在？有时在这些表格上，复选框会变灰/不存在或“无法点击”。我关于为什么会收到此错误的理论是因为在表格/表格中，“可用”ID 将开始于:

shr_SUBJECT=VC03 or sh_SUBJECT=VC04

然后它可能会跳到:

shr_SUBJECT=VC06 then skip to shr_SUBJECT=VC09 and so on...  

因此，如果 for 循环遇到不可用的 ID，例如 05 或 07，它会返回空错误 :(

我读了一些书，了解到 javascript 能够“捕获”“抛出”的错误？我现在的问题是，如果抛出此错误，我想知道是否有一种简单的方法可以简单地迭代到行中的下一个 ID。

再次感谢所有帮助，你们太棒了。

脚本的旧草稿

var getInputs = document.getElementsByTagName("input");
for (var i = 3, max = getInputs.length; i < max; i++){
if (getInputs[i].type === 'checkbox' && i < 10){
 var count = i;
 var endid = count.toString();
 var begid = "shr_SUBJECT=VC0";
 var fullid = begid.concat(endid);
 document.getElementById(fullid).click();
 }
 else if(getInputs[i].type === 'checkbox' && i >= 10){
 var count = i ;
 var endid = count.toString();
 var begid = "shr_SUBJECT=VC";
 var fullid = begid.concat(endid);
 document.getElementById(fullid).click();
 }
 }

--------编辑#2------------

可以在这个 URL 中找到我正在尝试操作的表格示例:

http://factfinder2.census.gov/faces/tableservices/jsf/pages/productview.xhtml?pid=ACS_12_5YR_DP02&prodType=table#

如果单击“修改表”按钮，则可以通过复选框选择/取消选择特定变量。如果您右键单击几个“事件”复选框并检查元素，它看起来像这样:

 <input id="shr_SUBJECT=VC03" checked="" alt="hide SUBJECT=VC03" name="" value="" onclick="javascript:hiderow('SUBJECT=VC03');" type="checkbox">


 <input id="shr_SUBJECT=VC25" checked="" alt="hide SUBJECT=VC25" name="" value="" onclick="javascript:hiderow('SUBJECT=VC25');" type="checkbox">

非常感谢@Jonathan Steinbeck 关于三元运算符的提示，它确实清理了我的代码。

脚本运行正常，但我现在遇到的问题是它在 try、catch 语句后没有迭代足够的次数。如果 id #'s 中存在间隙；说它从 shr_SUBJECT=VC19 跳到 shr_SUBJECT=VC=24 脚本将停止运行。有没有办法让它不断重试 try/catch 直到它获得有效 ID # 或一个存在/是事件复选框？

当前脚本草稿:

var getInputs = document.getElementsByTagName("input");
for (var i = 3, max = getInputs.length; i < max; i += 1) {
try {
    if (getInputs[i].type === 'checkbox'){
        document.getElementById("shr_SUBJECT=VC" + (i < 10 ? "0" : "") + i).click();
        }

    }   

catch (err) {
   i+=1;
   if (getInputs[i].type === 'checkbox'){
        if (getInputs[i].type === 'checkbox'){
        document.getElementById("shr_SUBJECT=VC" + (i < 10 ? "0" : "") + i).click();
        }
    }
   }
}

Answer 1

当您调用 document.getElementById() 时如果 ID 不存在，则返回 null。因此，此错误意味着您正在尝试对 null 调用 .click() 方法，这是行不通的。所以你应该检查你想要的元素的正确 ID 命名方案是什么。也许元素的计数从 1 而不是 0 开始？

另外，.click()据我所知，并不像您期望的那样适用于所有元素。因此，根据您尝试检索的元素类型，您可能必须 create and dispatch your own event正如 RobG 的评论所建议的那样。

EDIT 以响应您最近的编辑:

您可以像这样在 try-catch 中包装抛出错误的代码:

for (var i = 3, max = getInputs.length; i < max; i += 1) {
    try {
        document.getElementById("the_ID").click();
    }
    catch (error) {
        console.error(error);
        // continue stops the current execution of the loop body and continues
        // with the next iteration step
        continue;
    }
    // any code here will only be executed if there's not been an error thrown
    // in the try block because of the continue in the catch block
}

此外，您要对“i”变量做什么？分配给这么多变量没有意义。这也是一样的:

document.getElementById("shr_SUBJECT=VC" + (i < 10 ? "0" : "") + i).click();

...？ ... : ... 是一个运算符(称为“ternary operator”)，其工作方式如下:计算“？”之前的表达式。 - 如果结果为真值，“？”之间的表达式并且“:”被评估并成为使用运算符的结果；如果条件结果为假，则“:”之后的部分被评估为运算符的值。因此，虽然“if”是 JavaScript 中的语句(语句通常不会产生值)，但三元运算符可以用作表达式，因为它会产生值。

通过将字符串与其他内容连接起来，您强制将“其他内容”转换为字符串。所以像这样的表达式通常会产生一个字符串:

"" + someNonStringVar

此外，在 JavaScript 的循环体中定义变量没有意义。 JavaScript 变量具有函数作用域，而不是 block 作用域。这意味着循环体中定义的任何变量也存在于整个函数中。因此，建议将所有“var”写在函数的顶部，以明确它们的作用域。 JavaScript 的这种行为称为“hoisting”。 '，顺便说一下。

我还查看了您在最近的编辑中提供的 URL，但我没有找到您描述的 ID 的那种命名方案。您在哪个表格中找到了这些？

编辑以响应您的第二次编辑:

你不应该在 for 循环体中弄乱 'i' 变量。它使您的代码更难推理，并且可能不是您想要做的。您不需要在 catch block 中处理迭代的下一步。即使在从 DOM 中获取元素时出现错误，“i”变量也会递增。这就是您首先使用 catch 的原因。