Question

我试图将URL参数输入到表单输入中。当我试图通过检查控制台进行操作时，一切似乎都很好。但是当我加载页面时出现错误：未捕获TypeError：无法设置属性＆＃39; value＆＃39; 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在重新加载时随机变化，只有satisf_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中的第一个条目，为此需要添加[0]

之前的.value

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

javascript queryselector出错

3 个答案: