JavaScript无法运行，表示element为null，但是代码运行得很混乱

Question

我正在使用Java配置构建一个百里香和Spring项目。 当我在jsfiiddle中尝试此代码时，它工作正常，但是当我尝试在应用程序中运行它时，我得到了： TypeError: document.getElementById(...) is 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准备就绪时，才应添加click事件。

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

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