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

Question

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

1）单击一个按钮触发表格以加载。

2）表格的条目中有一个特定的值。

我的代码看起来像这样：

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

此脚本加载表单，但表单条目未更新。我想问题是尚未在DOM中加载表单条目，但是onload似乎没有完成这项工作...在这里我做错了什么？

Answer 1

做这个 -

1）您必须将所有文档变量放在窗口内。

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

2）当单击formButton时，您必须更改求发，因此将。值更改放入另一个功能中，例如So

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

Answer 2

您应该将按钮单击绑定到事件侦听器：

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

通过调用.click()函数，您只需触发任何给定的单击事件侦听器，但是您尚未声明一个，也可能不是您的意图。