Question

我有一个名为btn的变量，该变量分配给document.querySelector（）函数。我知道查询选择是正确的，因为当我通过浏览器控制台运行它时，它可以捕获我想要的元素。但是，该分配会产生空结果。这是因为我无法使用osclass框架以这种方式获取HTML吗？

我正在开发一个插件。该插件会更改注册表格。我要添加一个文本字段，其中已使用事件侦听器检测输入。如果有输入，我希望表单在单击“提交”按钮时执行某些操作。我怀疑检测此表单字段没有问题，因为我刚刚将其添加到了plugin文件夹中。但是，我无法从主题中获取HTML。我认为部分原因是因为我试图在HTML加载之前抓取它。即使这样，我还是尝试推迟脚本并在DOM内容加载后使用内联脚本来运行代码。没有成功

这是我想抓取的HTML内容。

<div class="controls">
     <button type="submit" class="ui-button ui-button-middle ui-button-main"><?php _e("Create", 'bender'); ?></button>
</div>

这是我用来执行此操作的代码，以及我要执行的代码：

var btn = document.querySelector("div.controls button");
btn.addEventListener("submit", function() {
     console.log("Honey is sweet!");
});

最后，这是我运行脚本的方式：

<script type="text/javascript" async="" defer="" src="<?php echo osc_base_url().'oc-content/plugins/honeypot/fieldcheck.js';?>"></script>

我应该提到我正在使用osclass钩子将此函数运行：osc_add_hook('user_register_form', 'twf_honeypot_form_field');

我希望变量捕获按钮，并将事件侦听器添加到按钮。提交表单后，它应将消息记录在控制台中。相反，发生的是此错误：Uncaught TypeError：无法读取null的属性'addEventListener'。

如果您使用过osclass，这是因为HTML位于其他地方吗？我以为，如果我推迟脚本执行，则该代码要等到页面加载后才能执行，而且我仍然可以获取HTML。如果没有，如何从主题文件中获取这部分HTML？

Answer 1

原来这行是问题所在：osc_add_hook('user_register_form', 'twf_honeypot_form_field')。即使我在脚本本身中指定这样做，也不会在加载dom之前执行代码，因为脚本仍仅在此处执行。我将脚本调用放入函数中，并添加了新的钩子：osc_add_hook('after_html', 'twf_deny');应该已经猜到该用例有一个钩子。

如何使用JavaScript从插件中获取osclass主题HTML？

1 个答案: