JavaScript 无法运行，说元素为空，但代码在 fiddle 中运行

Question

我正在使用 java 配置构建 thymeleaf 和 spring 项目。当我在 jsfiiddle 中尝试此代码时它工作正常，但是当我尝试在我的应用程序中运行它时，我得到以下信息:类型错误:document.getElementById(...) 为 null。

javascrips 的导入没有任何问题，源渲染它们和 html 都很好。

代码:

HTML:

<a href="#" id="buybutton" th:id="buybutton" th:text="#{cart.buy}">Buy</a>

JavaScript:

document.getElementById('buybutton').addEventListener("click", function(e){
   console.log("bought"); 
});

Thymeleaf 配置(如果有任何重要性):

@Configuration
public class ThymeleafConfig {

@Bean
public ServletContextTemplateResolver templateResolver() {
    ServletContextTemplateResolver resolver = new ServletContextTemplateResolver();
    resolver.setPrefix("/WEB-INF/pages/");
    resolver.setSuffix(".html");
    resolver.setTemplateMode("HTML5");
    resolver.setOrder(1);
            resolver.setCacheable(false);
            resolver.setCharacterEncoding("UTF-8");

    return resolver;
}

}

Answer 1

仅当 DOM 准备就绪时才应添加单击事件。

注意:对于 jsfiddle，这是默认行为。

document.addEventListener("DOMContentLoaded", function(event) { 
  document.getElementById('buybutton').addEventListener("click", function(e){
   console.log("bought"); 
  });
});