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"); 
  });
});