Question

我是Javascript的新手。

我正在编写一个代码，该代码将以编程方式单击打开对话框的按钮，然后在该对话框中输入一些文本。问题是在单击按钮打开对话框之前，带有文本区域的DOM元素不存在，因此我的代码打开对话框，然后尝试将文本输入到不存在的文本区域时出错...

代码看起来像这样：

document.getElementsByTagName('button')[1].click(); // opens a dialog box
document.getElementsByName('message_body')[0].value = 'my text'; // enters text to dialog

当我运行第一行，等待加载对话框，然后运行第二行时，它会起作用。当我尝试同时运行两条线时，它不起作用。

到目前为止我尝试过的内容

我尝试过使用超时：

document.getElementsByTagName('button')[i].click(); setTimeout(document.getElementsByName('message_body')[0].value = 'my text',7000);

但第二行只是给出了同样的错误。

也尝试过：

document.getElementsByTagName('button')[49].click(); 
setTimeout(1,7000);  
document.getElementsByName('message_body')[0].value = 'my text';

我得到了同样的错误。

我还试过一段时间等待文本框的定义，这只是让我的浏览器卡住......

document.getElementsByTagName('button')[49].click();     
while(document.getElementsByName('message_body')[0] == undefined){}
document.getElementsByName('message_body')[0].value = 'my text';

我的问题

有没有办法让Javascript运行＆＃34;输入文字＆＃34;只有在对话框打开后，我才会收到错误？

Answer 1

Javascript没有关注DOM。因此，当您添加元素时，您的代码无法找到新更新的节点元素。像React或AngularJS一样工作的前端框架将监视DOM，并能够在添加或删除新元素时更新DOM。需要一个前端框架工作来观察DOM并为您提供所需的效果。

Answer 2

答案很简单。我不得不这样写'setTimeout'：

document.getElementsByTagName('button')[1].click(); //open dialog box 
setTimeout(function() {document.getElementsByName('message_body')[0].value = 'my text';},500); // wait for 0.5 sec, than run.

而不是

document.getElementsByTagName('button')[1].click(); //open dialog box 
    setTimeout(document.getElementsByName('message_body')[0].value = 'my text';,500); // wait for 0.5 sec, than run.

等到对话框打开，然后运行

2 个答案: