javascript queryselector出错

Question

我正在尝试将URL参数输入到表单输入中。当我尝试通过inspect控制台执行此操作时，一切似乎都很正常。但当我加载页面时，我得到了一个错误:未捕获值:无法设置空值的属性‘TypeError’。

这里的主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的一部分会在重新加载时随机更改，只有satisfaction_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")

我不得不说我在这方面有点盲目。任何旗帜都将不胜感激。

这是我的页面的网址：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 *= satisfaction_case_number]').value = 'example'

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'));
  }
});