为什么单击按钮后表单条目不更新 [JS]?

Why doesn't the form entry update after button click [JS]?

我正在编写一个应该执行以下操作的小脚本:

1) 单击按钮会触发加载表单。

2) 表单的一个条目填充了一个特定的值。

我的代码看起来像这样:

document.getElementById('formButton').click();
window.onload = function(){
  document.getElementById('formEntry').value = "foo";
};

此脚本加载表单,但表单条目未更新。 我想问题是表单条目尚未加载到 DOM 中,但 onload 似乎没有完成这项工作......关于我在这里做错了什么的任何提示?

您应该将按钮点击绑定到事件侦听器:

window.onload = function(){
  document.getElementById('formButton').addEventListener('click',function(){
    document.getElementById('formEntry').value = "foo";
  });
};

通过调用 .click() 函数,您只需触发任何给定的点击事件侦听器,但您还没有声明一个,这也可能不是您的意图。

这样做 -

1) 您必须将所有文档变量放入 window.onload

window.onload = function() {
  var formEntry = document.getElementById('formEntry');
  var formButton = document.getElementById('formButton');
};

2) 单击 formButton 时必须更改 formEntry,因此将 .value 更改放在另一个函数中,例如

window.onload = function() {
  var formEntry = document.getElementById('formEntry');
  var formButton = document.getElementById('formButton');

  formButton.addEventListener('click', function() {
    formEntry.value = "foo";
  });
};

或者

window.onload = function() {
  document.getElementById('formButton').addEventListener('click', function() {
    document.getElementById('formEntry').value = "foo";
  });
};