javascript查询选择器出错

我试图在表单输入中输入URL参数。当我试图通过inspect控制台执行此操作时，一切似乎都很好。但是当我加载页面时，我得到了一个错误：uncaughttypeerror:无法将属性“value”设置为null

这里是主要的javascript代码

function getParameterByName(name)
 {
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.href);
  if(results == null)
     return "";
  else
 return decodeURIComponent(results[1].replace(/\+/g, " "));
 }

我的输入看起来像这样。。。重新加载时，ID的一部分会随机更改，只有“满足度”案例编号保持不变

<input id="satisfaction_case_number-da4e00e8-dcf6-4efa-9f92-d9564432f979_2621" class="hs-input" type="text" name="satisfaction_case_number" value="" placeholder="" data-reactid=".hbspt-forms-0.0:$0.$satisfaction_case_number.0">

及

我得说我这里有点瞎。任何旗帜都将不胜感激

以下是我的页面的URL:

我试图将：CAS-00745-Z0G5F8输入。 谢谢

或者尝试修改创建HubSpot表单的代码：

hbspt.forms.create({
  // ...
  onFormReady: function () {
    var input = document.querySelector('[id^="satisfaction_case_number"]');
    input.value = getParameterByName('case');
    input.dispatchEvent(new Event('change'));
  }
});

或者尝试修改创建HubSpot表单的代码：

hbspt.forms.create({
  // ...
  onFormReady: function () {
    var input = document.querySelector('[id^="satisfaction_case_number"]');
    input.value = getParameterByName('case');
    input.dispatchEvent(new Event('change'));
  }
});

---

等待窗口加载完毕，然后执行它

window.onload = function () {
    document.getElementsByName("satisfaction_case_number")[0].value = getParameterByName('case'); 
}

表单是在加载其余内容后动态生成的，依赖时间是不可靠的，因为连接速度可能会有所不同，使用

窗口。onload

将确保页面在执行之前已完全加载

---

我通过限制浏览器连接到“Slow 3G”来测试这一点，它仍然有效，您按名称选择元素的原始代码没有选择节点列表中的第一个条目，为此，您需要在

.value

之前添加

[0]

，等待窗口加载后执行它

window.onload = function () {
    document.getElementsByName("satisfaction_case_number")[0].value = getParameterByName('case'); 
}

表单是在加载其余内容后动态生成的，依赖时间是不可靠的，因为连接速度可能会有所不同，使用

窗口。onload

将确保页面在执行之前已完全加载

---

---

我通过限制浏览器连接到“Slow 3G”来测试这一点，它仍然有效，您按名称选择元素的原始代码没有选择节点列表中的第一个条目，为此，您需要在

.value

之前添加

[0]

，您可以尝试

document.querySelector（'input[id*=满意度\案例\编号]）。值='example'

您可以尝试

文档。查询选择器（'input[id*=满意度\案例\编号]））.value='example'

您真的在使用jQuery吗？还是错误地添加到OP中了？没有

getElementByName

，有一个

getElementsByName

返回集合。

document.querySelector（'[id^=“满意度”\u case\u number“]）。value=“foo”

在你的页面上对我来说效果很好。效果很好。如果你的意思是你不能在元素中获得正确的值，那么你的

getParameterByName

代码就有问题。页面加载时HTML在那里，还是动态添加的？这可能是个问题。你真的在使用jQuery吗？还是错误地添加到OP中？没有问题

getElementByName

，有一个

getElementsByName

返回一个集合。

document.querySelector（“[id^=“满意度”\u case\u number”]”）。value=“foo”

在您的页面上对我来说效果很好。效果很好。如果您的意思是无法在元素中获得正确的值，那么您的

getParameterByName

代码有问题。页面加载时HTML是否存在，或者是动态添加的？这可能是个问题。这不是问题。请参阅问题下方的注释。可能是元素ent在您尝试访问它的时候不存在？我已经更新了答案，请尝试这些解决方案。您正在更新的元素可能在一开始就不存在。因此您需要等待它出现的那一刻。可能呈现表单的库为它提供了一个钩子（类似于

onReady

或类似的东西？）@DmitryDruganov它超时工作了…我猜表单一开始没有加载。addEventListener没有工作…我看到您正在使用HubSpot API创建表单。我不熟悉它，但它似乎提供了

onFormReady

钩子。也可以尝试一下。这不是问题。请参阅问题下面的注释。可能不是元素在您尝试访问它的那一刻不存在？我已经更新了答案，请尝试这些解决方案。您正在更新的元素可能在一开始就不存在。因此您需要等待它出现的那一刻。可能呈现表单的库为它提供了一个钩子（类似于

onReady

或类似的？。@DmitryDruganov它在超时情况下工作…我猜表单在开始时没有加载。addEventListener不工作，因为…我看到您正在使用HubSpot API创建表单。我不熟悉它，但看起来它提供了

onFormReady

钩子。也可以尝试一下。也可以工作（更早）也可能起作用（更早）

window.onload = function () {
    document.getElementsByName("satisfaction_case_number")[0].value = getParameterByName('case'); 
}