WordPress 主题 (Blocksy) 开发中的 JavaScript 警报问题

Question

我想使用 Blocksy 主题在 WordPress 上开发一些东西。

首先，我想通过创建一个简单的输入按钮来测试我的 HTML 和 JavaScript 是否正常工作。

我先在VScode中测试了一下。当用户输入电子邮件并单击“提交”时，网页应显示一条警告“Hello from JavaScript！”

这是我的代码：

HTML（仅限正文部分）：

<form>
    <label for="email">Enter Email Address</label>
    <input type="email" id="emailInput" name="email" multiple="">
    <input type="submit" id="useremail" name="submit">
    <script src="index.js"></script>     
</form>

index.js：

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById("useremail").onclick = function() {
        alert("Hello from JavaScript!");
    };
});

在 VScode 中测试并确认其有效后，我在 WordPress 上尝试了相同的代码。但是，无论我如何尝试，单击提交后都不会显示警报消息。

我读了很多文章，但仍然没有找到解决方案。以下是我遵循的步骤：

1. 打开编辑帖子页面。
2. 将“email-script.js”上传到“/wp-content/themes/blocksy/static/js/”，因此路径为“/wp-content/themes/blocksy/static/js/email-script.js” .

document.addEventListener('DOMContentLoaded', function () {
    console.log("Document ready! Kuan");
    console.log("hello kuan");
    document.getElementById("useremail").onclick = function() {
        alert("Hello from JavaScript!");
    };
});

3. 添加自定义 HTML 块并粘贴代码（根据我的 blocksy 路径将 src 更改为我的自定义 JavaScript 路径）：

<form>
    <label for="email">Enter Email Address</label>
    <input type="email" id="emailInput" name="email" multiple="">
    <input type="submit" id="useremail" name="submit">
    <script src="/wp-content/themes/blocksy/static/js/email-script.js"></script>
</form>

4. 将以下代码添加到“/wp-content/themes/blocksy/functions.php”：

function load_custom_scripts() {
    wp_enqueue_script('custom-email-script', get_template_directory_uri() . '/static/js/email-script.js', array(), false, true);
}

add_action('wp_enqueue_scripts', 'load_custom_scripts');

我检查了控制台，没有错误。我有什么遗漏的吗？

Answer 1

几个小时后，我终于成功了！
问题出在 HTML 上。
这是适合我的情况的正确解决方案。

<form>
    <label for="emailInput">Enter Email Address</label>
    <input type="email" id="emailInput" name="email" autocomplete="email" multiple="">
    <input type="submit" id="useremail" name="submit">
<script src="/wp-content/themes/blocksy/static/js/email-script.js"></script>
</form>

标签中的“for”应该指向当前的id。例如，最初它指向一个不存在的 id。在我将其指向“emailInput”之后。错误消失了。现在工作正常！