Question

javascript 查询选择器出现错误

2017-11-16

494

javascript

我尝试将 URL 参数输入到表单输入中。当我尝试通过检查控制台执行此操作时，一切似乎都很好。但是当我加载页面时，我收到一个错误：未捕获的 TypeError：无法将属性“值”设置为 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 的一部分在重新加载时随机更改，只有fulness_case_number 保持不变。

<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">

我尝试了 2 个函数调用。

document.getElementByName("satisfaction_case_number").value = getParameterByName("case")

和

document.querySelector('[id^="satisfaction_case_number"]').value = getParameterByName("case")

我不得不说我在这里有点盲目。任何标记都将不胜感激。

这是我的页面的 URL： http://info.techo-bloc.com/customer-service-0?case=CAS-00745-Z0G5F8 。

我正在尝试将：CAS-00745-Z0G5F8 输入到输入中。谢谢

Answer 1

等待窗口加载完毕后再执行；

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

表单是在其余内容加载完毕后动态生成的，依赖时间是不可靠的，因为连接速度可能会有所不同，使用 window.onload 将确保页面在执行前完全加载。

我通过将浏览器连接限制为“慢速 3G”进行了测试，它仍然有效，您最初按名称选择元素的代码段并未选择 NodeList 中的第一个条目，为此您需要在 .value 之前添加 [0]

Answer 2

您可以尝试 document.querySelector('input[id *=fulness_case_number]').value = 'example'

Petrashka Siarhei

2017-11-16

Answer 3

setTimeout(function () {
  var input = document.querySelector('[id^="satisfaction_case_number"]');
  input.value = getParameterByName('case');
  input.dispatchEvent(new Event('change'));
}, 1000);

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

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