JavaScript - 在for循环错误中调用函数答案

【问题标题】：JavaScript - Calling a function in for loop errorJavaScript - 在for循环错误中调用函数
【发布时间】：2021-11-20 15:03:24
【问题描述】：

我有以下脚本，它应该从 URL 查询字符串中获取参数，将它们放入数组中，然后将值放入文本字段中。

<script type="text/javascript">
    function getUtms(name) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
        return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }
    
    var utmArray = ['utm_campaign','utm_medium','utm_source'];
    for (var i = 0; i < utmArray.length; i++) {
      console.log(utmArray[i]);
      document.querySelector("p." + utmArray[i] + " input").value = getUtms(utmArray[i]);
    }
    </script>

    <input type="text" name="utm_campaign">
    <input type="text" name="utm_medium">
    <input type="text" name="utm_source">

但是我收到以下错误

未捕获的 TypeError：无法设置 null 的属性（设置“值”）

与线路有关

document.querySelector("p." + utmArray[i] + " input").value = getUtms(utmArray[i]);

提前致谢！

【问题讨论】：

您正在查询段落 p. 但我在您的 html 中看不到任何内容

标签： javascript arrays for-loop

【解决方案1】：

您需要查询input 元素。在您的代码中，正如@Reyno 指出的那样，您正在查询没有value 属性的p 标签。您还可以使用getElementsByName 以在当前索引处按指定名称访问每个输入的值。

你可以像这样重写你的代码：

function getUtms(name) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
        return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }
    
    var utmArray = ['utm_campaign','utm_medium','utm_source'];
    for (var i = 0; i < utmArray.length; i++) {
      console.log(utmArray[i]);
      document.getElementsByName(utmArray[i])[0].value = getUtms(utmArray[i]);
    }

<input type="text" name="utm_campaign">
<input type="text" name="utm_medium">
<input type="text" name="utm_source">

【讨论】：

@matt-croak 谢谢！我添加了一个新变量： var utmArrayLength = -1;在 for 循环中，我将其更改为： for (var i = 0; i
@ianhman 我对引入var utmArrayLength = -1 感到困惑，因为这将导致没有循环（索引永远不会小于-1）。

【解决方案2】：

你需要的选择器不是 "p." + utmArray[i] + " input" 反而 "input[name="+utmArray[i]+"]"

即获取 name 属性等于 utmArray[i]

的输入标签

所以完全...

document.querySelector("input[name="+utmArray[i]+"]").value = getUtms(utmArray[i]);

【讨论】：